From cc505188b783ab327701e13cc1d90476b61fdde7 Mon Sep 17 00:00:00 2001 From: Marc Tonsen Date: Wed, 20 Sep 2023 14:31:03 +0200 Subject: [PATCH 1/2] Introducing new Pupil Cloud section covering enrichments and visualizations --- src/.vuepress/config.js | 79 +++++++++++-------- .../enrichments/face-mapper.md | 2 +- .../enrichments/marker-mapper.md | 12 +-- src/{ => pupil-cloud}/enrichments/overview.md | 22 ++---- .../enrichments/reference-image-mapper.md | 22 +++--- src/pupil-cloud/visualizations/heatmap.md | 15 ++++ src/pupil-cloud/visualizations/overview.md | 61 ++++++++++++++ .../visualizations/video-renderer.md} | 6 +- 8 files changed, 149 insertions(+), 70 deletions(-) rename src/{ => pupil-cloud}/enrichments/face-mapper.md (92%) rename src/{ => pupil-cloud}/enrichments/marker-mapper.md (84%) rename src/{ => pupil-cloud}/enrichments/overview.md (86%) rename src/{ => pupil-cloud}/enrichments/reference-image-mapper.md (91%) create mode 100644 src/pupil-cloud/visualizations/heatmap.md create mode 100644 src/pupil-cloud/visualizations/overview.md rename src/{enrichments/gaze-overlay.md => pupil-cloud/visualizations/video-renderer.md} (84%) diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 983c6f236..00273d504 100644 --- a/src/.vuepress/config.js +++ b/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 diff --git a/src/enrichments/face-mapper.md b/src/pupil-cloud/enrichments/face-mapper.md similarity index 92% rename from src/enrichments/face-mapper.md rename to src/pupil-cloud/enrichments/face-mapper.md index 088cc508f..5f6931356 100644 --- a/src/enrichments/face-mapper.md +++ b/src/pupil-cloud/enrichments/face-mapper.md @@ -7,7 +7,7 @@ permalink: /enrichments/face-mapper
diff --git a/src/enrichments/marker-mapper.md b/src/pupil-cloud/enrichments/marker-mapper.md similarity index 84% rename from src/enrichments/marker-mapper.md rename to src/pupil-cloud/enrichments/marker-mapper.md index eebab13a7..cd16d1a62 100644 --- a/src/enrichments/marker-mapper.md +++ b/src/pupil-cloud/enrichments/marker-mapper.md @@ -5,7 +5,7 @@ permalink: /enrichments/marker-mapper # Marker Mapper
- @@ -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:
- - + + - - + +
@@ -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.
- diff --git a/src/enrichments/overview.md b/src/pupil-cloud/enrichments/overview.md similarity index 86% rename from src/enrichments/overview.md rename to src/pupil-cloud/enrichments/overview.md index 310c00adf..a0414a2dd 100644 --- a/src/enrichments/overview.md +++ b/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}`)" />

{{ item.title }}

@@ -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", - }, ], }; }, } - - - - - - diff --git a/src/enrichments/reference-image-mapper.md b/src/pupil-cloud/enrichments/reference-image-mapper.md similarity index 91% rename from src/enrichments/reference-image-mapper.md rename to src/pupil-cloud/enrichments/reference-image-mapper.md index 7ca815702..abc8b0c04 100644 --- a/src/enrichments/reference-image-mapper.md +++ b/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**! 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')" > First, we need a high-resolution .jpeg of the page.
@@ -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')" > Here we can take a photo of the basketball hoop and court background.
@@ -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')" > This photo captures the assortment of packagíng in the coffee aisle of a supermarket.
@@ -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')" > This is a photo of the entire building @@ -144,7 +144,7 @@ Why not try replicating the above examples? Or even try it with your own use cas @@ -163,7 +163,7 @@ Now when you play back the recording you can see where gaze is mapped to on your
diff --git a/src/pupil-cloud/visualizations/heatmap.md b/src/pupil-cloud/visualizations/heatmap.md new file mode 100644 index 000000000..922939e6a --- /dev/null +++ b/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 +
+ + +
+ +TBD + diff --git a/src/pupil-cloud/visualizations/overview.md b/src/pupil-cloud/visualizations/overview.md new file mode 100644 index 000000000..808e612f5 --- /dev/null +++ b/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 + +
+
+
+ + +

{{ item.title }}

+ +

+ {{ item.text }} +

+
+
+
+ + + + + + + + + diff --git a/src/enrichments/gaze-overlay.md b/src/pupil-cloud/visualizations/video-renderer.md similarity index 84% rename from src/enrichments/gaze-overlay.md rename to src/pupil-cloud/visualizations/video-renderer.md index 9908e12a6..f1f31d2b5 100644 --- a/src/enrichments/gaze-overlay.md +++ b/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
From 3e06fac3e7e2638f728429eb581a48132e78a7e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20Garc=C3=ADa=20Garc=C3=ADa?= Date: Wed, 20 Sep 2023 14:56:27 +0200 Subject: [PATCH 2/2] Fix Sidebar in undefined routes --- src/.vuepress/theme/layouts/Layout.vue | 31 +++++++++++++++++--------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/.vuepress/theme/layouts/Layout.vue b/src/.vuepress/theme/layouts/Layout.vue index 93bbda7c9..d0f7ac546 100644 --- a/src/.vuepress/theme/layouts/Layout.vue +++ b/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,20 +96,23 @@ 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 { @@ -110,8 +120,9 @@ export default { } } 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 {