Introducing new Pupil Cloud section covering enrichments and visualiz…

…ations

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/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 @@ permalink: /enrichments/marker-mapper
 # 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 @@ For robust detection, you should place enough markers on your surface such that
 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 @@ Note that when adding a new marker to the surface definition, another marker tha
 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 @@ From mapping your gaze to real-world features of the environment, like surfaces,
             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 @@ export default {
       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
+

src/pupil-cloud/visualizations/overview.md

@@ -0,0 +1,61 @@
+---
+description: Explanation of all available enrichments including setup instructions.
+permalink: /pupil-cloud/visualizations
+---
+
+# Visualizations 
+TBD
+
+<div>
+    <div class="grid grid-cols-1 sm-grid-cols-2 md-grid-cols-3 lg-grid-cols-2 xl-grid-cols-3 gap-8">
+      <div v-for="(item, index) in visualizations">
+        <router-link
+          :key="index"
+          :to="item.to"
+        >
+          <v-img
+            class="rounded"
+            aspect-ratio="1.4"
+            style="margin-bottom:32px;"
+            :position="item.position"
+            :src="require(`../../media/enrichments/${item.img}`)"
+          />
+          <p class="caption--1 font-weight-bold pb-3">{{ item.title }}</p>
+        </router-link>
+        <p class="caption--1">
+          {{ item.text }}
+        </p>
+      </div>
+    </div>
+</div>
+
+
+<script>
+export default {
+  data() {
+    return {
+      panel: null,
+      visualizations: [
+        {
+          title: "Video Renderer",
+          to: "/pupil-cloud/visualizations/video-renderer",
+          text: "TBD",
+          img: "reference_image_mapper_header.png",
+        },
+        {
+          title: "Heatmap",
+          to: "/pupil-cloud/visualizations/Heatmap",
+          text: "TBD",
+          img: "reference_image_mapper_header.png",
+        },
+      ],
+    };
+  },
+}
+</script>
+
+
+
+
+
+

src/enrichments/gaze-overlay.md → src/pupil-cloud/visualizations/video-renderer.md

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