Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merge master to GH #642

Merged
merged 5 commits into from
Nov 28, 2023
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Add grid template rows for subgrid
nathakits committed Nov 27, 2023
commit c762a0d88bd7b197eb20738af8b8a1dedc168359
5 changes: 1 addition & 4 deletions components/Youtube.vue
Original file line number Diff line number Diff line change
@@ -20,10 +20,7 @@
</script>

<template>
<div
class="pb-4"
style="display: flex; justify-content: center; aspect-ratio: 16 / 9"
>
<div style="display: flex; justify-content: center; aspect-ratio: 16 / 9">
<iframe
width="100%"
height="height"
4 changes: 4 additions & 0 deletions custom.css
Original file line number Diff line number Diff line change
@@ -561,6 +561,10 @@
background-color: var(--vp-c-default-1);
}

.subgrid {
grid-template-rows: subgrid;
}

@media (min-width: 768px) {
#app .VPNavScreen {
display: unset;
Binary file not shown.
7 changes: 7 additions & 0 deletions invisible/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -14,4 +14,11 @@ module.exports = {
},
},
plugins: [],
safelist: [
{
pattern: /grid-cols-(1|2|3|4|5)/,
},
"^sm:grid-cols-",
"m-auto",
],
};
155 changes: 81 additions & 74 deletions neon/pupil-cloud/enrichments/reference-image-mapper/index.md
Original file line number Diff line number Diff line change
@@ -4,14 +4,14 @@

<Youtube src="IF8f1Z3ZkEo" muted="1"/>


A heatmap of gaze data mapped onto the reference image can be generated, and mapped gaze and fixation data can further be downloaded as [CSV files](/pupil-cloud/enrichments/reference-image-mapper/#export-format).
A heatmap of gaze data mapped onto the reference image can be generated, and mapped gaze and fixation data can further be downloaded as [CSV files](/pupil-cloud/enrichments/reference-image-mapper/#export-format).

## Setup

<Youtube src="ygqzQEzUIS4"/>

Check warning on line 11 in neon/pupil-cloud/enrichments/reference-image-mapper/index.md

GitHub Actions / ✍️ Check spelling

Unknown word (ygqz)

As described in the setup video, you will need two things in addition to your eye tracking recording(s) to produce a Reference Image Mapper enrichment:

1. A reference image
2. A scanning video of the object/feature(s) taken with Neon’s scene camera

@@ -21,100 +21,106 @@
<br/>
<br/>
<b>Duration</b><br/>
The **3 min** duration limit only applies to the scanning recording, the rest of your videos can be as long as you like. <br/>But to avoid long processing times and get the best results, we recommend spliting the recordings into relevant parts where you expect the image to be mapped. <br/>

Check warning on line 24 in neon/pupil-cloud/enrichments/reference-image-mapper/index.md

GitHub Actions / ✍️ Check spelling

Unknown word (spliting)
:::

In this guide, we will show you how the Reference Image Mapper can be used in a few different situations. This should help you get set up using the enrichment in your own testing environment!

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="[
`./heatmap-0.jpg`,
`./heatmap-1.jpg`,
`./heatmap-2.jpg`,
`./heatmap-3.jpg`,
]"/>
![Reference images collage](./rim-collage.webp)

Let's take a look at what the Reference Image and Scanning Recording look like to produce these heatmaps.

Check warning on line 33 in neon/pupil-cloud/enrichments/reference-image-mapper/index.md

GitHub Actions / ✍️ Check spelling

Unknown word (heatmaps)
### 1. Magazine Reading

<div class="grid grid-cols-2 gap-4">
<div>
<h4>Reference image</h4>

![Magazine Reference Image](./magazine-img.jpg)
### 1. Magazine Reading

First, we need a high-resolution .jpeg of the page.
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="grid subgrid" style="grid-row: 1 / 4">

Check warning on line 38 in neon/pupil-cloud/enrichments/reference-image-mapper/index.md

GitHub Actions / ✍️ Check spelling

Unknown word (subgrid)
<h4>Reference image</h4>
<img src="./magazine-img.jpg" alt="Magazine Reference Image">
<div>First, we need a high-resolution .jpeg of the page.</div>
</div>
<div>
<div class="grid subgrid" style="grid-row: 1 / 4">

Check warning on line 43 in neon/pupil-cloud/enrichments/reference-image-mapper/index.md

GitHub Actions / ✍️ Check spelling

Unknown word (subgrid)
<h4>Scanning video</h4>
<Youtube src="SplYZK-ZzE8"/>
Then, we need a scanning recording, about <i>15 s</i> long, taken on a blank background and in good lighting (natural light works well). Note that the magazine page is clear with good contrast
<div class="m-auto">
<Youtube src="SplYZK-ZzE8"/>
</div>
<div>
Then, we need a scanning recording, about <i>15 s</i> long, taken on a blank background and in good lighting (natural light works well). Note that the magazine page is clear with good contrast
</div>
</div>
</div>


### 2. Basketball

<div class="grid grid-cols-2 gap-4">
<div>
<h4>Reference image</h4>

![Basketball Reference Image](./basketball-img.jpg)

Here we can take a photo of the basketball hoop and court background.
<div class="grid subgrid" style="grid-row: 1 / 4">

Check warning on line 57 in neon/pupil-cloud/enrichments/reference-image-mapper/index.md

GitHub Actions / ✍️ Check spelling

Unknown word (subgrid)
<h4>Reference image</h4>
<img src="./basketball-img.jpg" alt="Basketball Reference Image">
<div>Here we can take a photo of the basketball hoop and court background.</div>
</div>
<div>
<div class="grid subgrid" style="grid-row: 1 / 4">

Check warning on line 62 in neon/pupil-cloud/enrichments/reference-image-mapper/index.md

GitHub Actions / ✍️ Check spelling

Unknown word (subgrid)
<h4>Scanning video</h4>
<Youtube src="4MB5o4W_XJo"/>
The scanning recording, in this case, is about 45 s long – note that the angles and distances cover what a player might see when dribbling towards the basket or taking a shot
<div class="m-auto">
<Youtube src="4MB5o4W_XJo"/>
</div>
<div>
The scanning recording, in this case, is about 45 s long – note that the angles and distances cover what a player might see when dribbling towards the basket or taking a shot
</div>
</div>
</div>

### 3. Supermarket Shelf

<div class="grid grid-cols-2 gap-4">
<div>
<h4>Reference image</h4>

![Supermarket Reference Image](./supermarket-img.jpg)

This photo captures the assortment of packagíng in the coffee aisle of a supermarket.
<div class="grid subgrid" style="grid-row: 1 / 4">

Check warning on line 76 in neon/pupil-cloud/enrichments/reference-image-mapper/index.md

GitHub Actions / ✍️ Check spelling

Unknown word (subgrid)
<h4>Reference image</h4>
<img src="./supermarket-img.jpg" alt="Supermarket Reference Image">
<div>This photo captures the assortment of packagíng in the coffee aisle of a supermarket.</div>

Check warning on line 79 in neon/pupil-cloud/enrichments/reference-image-mapper/index.md

GitHub Actions / ✍️ Check spelling

Unknown word (packagíng)
</div>
<div>
<div class="grid subgrid" style="grid-row: 1 / 4">
<h4>Scanning video</h4>
<Youtube src="d3Yk3nKDIOQ"/>
Notice that the scanning recording is fairly slow to reduce motion blur for this feature-rich shelf.
<div class="m-auto">
<Youtube src="d3Yk3nKDIOQ"/>

Check warning on line 84 in neon/pupil-cloud/enrichments/reference-image-mapper/index.md

GitHub Actions / ✍️ Check spelling

Unknown word (KDIOQ)
</div>
<div>
Notice that the scanning recording is fairly slow to reduce motion blur for this feature-rich shelf.
</div>
</div>
</div>

### 4. An Entire Building

<div class="grid grid-cols-2 gap-4">
<div>
<h4>Reference image</h4>

![Building Reference Image](./building-img.jpg)

This is a photo of the <i>entire</i> building
<div class="grid subgrid" style="grid-row: 1 / 4">
<h4>Reference image</h4>
<img src="./building-img.jpg" alt="Building Reference Image">
<div>This is a photo of the <i>entire</i> building</div>
</div>
<div>
<div class="grid subgrid" style="grid-row: 1 / 4">
<h4>Scanning video</h4>
<Youtube src="0U4H-uOIHlw"/>
We take a longer scanning recording, about 2 min. The angles and distances cover what a person might see whilst walking past or standing in front of the building.
<div class="m-auto">
<Youtube src="0U4H-uOIHlw"/>
</div>
<div>
We take a longer scanning recording, about 2 min. The angles and distances cover what a person might see whilst walking past or standing in front of the building.
</div>
</div>
</div>

## Scanning Best Practices

Try to follow these best practices when recording a scanning video:

- Make the recording while holding Neon in your hand rather than wearing it on your head.
- Record the object of interest from all possible angles and from all distances a subject may view them. More diversity is better. Collecting sufficiently diverse viewpoints for a large object, like a building, may require you to move accordingly large distances.
- Move the glasses slowly while recording to avoid motion blur.
- Make sure to have good contrast and that your scene lighting during scanning is similar to that during mapping.

What works and what doesn’t?

- The scene must be **feature-rich** like in the examples above. There has to be enough salient visual content to produce a successful mapping.
- The scene needs to have relatively **static** features in the environment. If there is a lot of movement or the objects change in appearance or shape, the mapping *can* fail.
- The scene needs to have relatively **static** features in the environment. If there is a lot of movement or the objects change in appearance or shape, the mapping _can_ fail.

::: tip
**Ready to go?**<br>
@@ -126,6 +132,7 @@
![Reference Image Mapper in Pupil Cloud](./rim-in-cloud.png)

To check if gaze has been mapped successfully, use the side-by-side view:

1. Select a recording.
2. Select the Reference Image Mapper Enrichment.
3. Select the Scene / Reference Image View.
@@ -137,17 +144,16 @@

![Basketball Occlusion](./basketball-occlusion.png)


Sometimes an object will occlude the feature/object of interest. The reference image mapper may not recognize this, so a false positive mapping could occur.
Sometimes an object will occlude the feature/object of interest. The reference image mapper may not recognize this, so a false positive mapping could occur.

If you need to remove the falsely mapped data points, there are a few workarounds.

1. Use Events and Sections to trim out false positive sections.
2. Manually remove the affected data points in the reference image mapper export, by finding the timestamp and deleting the row in the .csv export.

## Repetitions
In cases such as supermarket shopping, where features of the environment like freezers and aisles are repetitive and overlapping, it can be useful to divide recordings into shorter sections using [Events](/data-collection/events/) for enrichment. This way you can ensure gaze is only mapped to portions of the recording during which you know the user is looking at a particular part of the store.

In cases such as supermarket shopping, where features of the environment like freezers and aisles are repetitive and overlapping, it can be useful to divide recordings into shorter sections using [Events](/data-collection/events/) for enrichment. This way you can ensure gaze is only mapped to portions of the recording during which you know the user is looking at a particular part of the store.

::: tip
**Want to know more?**<br>
@@ -157,35 +163,36 @@
## Export Format

### gaze.csv
This file contains all the mapped gaze data from all sections.

This file contains all the mapped gaze data from all sections.

| Field | Description |
| -------- | -------- |
| **section id** | Unique identifier of the corresponding section. |
| **recording id** | Unique identifier of the recording this sample belongs to. |
| **timestamp [ns]** | UTC timestamp in nanoseconds of the sample. Equal to the timestamp of the original gaze sample before mapping. |
| **gaze detected in reference image** | Boolean indicating whether or not the gaze point was detected inside or outside of the reference image. |
| **gaze position in reference image x [px]** | Float value representing the x-coordinate of the mapped gaze point in pixel coordinates. If the reference image was not detected in the scene at the given time this value is empty. |
| **gaze position in reference image y [px]** | Same as "gaze position in reference image x [px]" but for the y-coordinate. |
| **fixation id** | If this gaze sample belongs to a fixation event, this is the corresponding id of the fixation. Otherwise, this field is empty. |
| **blink id** | If this gaze samples belongs to a blink event, this is the corresponding id of the blink. Otherwise this field is empty. |
| Field | Description |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **section id** | Unique identifier of the corresponding section. |
| **recording id** | Unique identifier of the recording this sample belongs to. |
| **timestamp [ns]** | UTC timestamp in nanoseconds of the sample. Equal to the timestamp of the original gaze sample before mapping. |
| **gaze detected in reference image** | Boolean indicating whether or not the gaze point was detected inside or outside of the reference image. |
| **gaze position in reference image x [px]** | Float value representing the x-coordinate of the mapped gaze point in pixel coordinates. If the reference image was not detected in the scene at the given time this value is empty. |
| **gaze position in reference image y [px]** | Same as "gaze position in reference image x [px]" but for the y-coordinate. |
| **fixation id** | If this gaze sample belongs to a fixation event, this is the corresponding id of the fixation. Otherwise, this field is empty. |
| **blink id** | If this gaze samples belongs to a blink event, this is the corresponding id of the blink. Otherwise this field is empty. |

### fixations.csv
This file contains fixation events detected in the gaze data stream and mapped to the reference image.

This file contains fixation events detected in the gaze data stream and mapped to the reference image.

| Field | Description |
| -------- | -------- |
| **section id** | Unique identifier of the corresponding section. |
| **recording id** | Unique identifier of the recording this sample belongs to. |
| **fixation id** | Identifier of fixation within the section. The id corresponds to the fixation id of the raw unmapped data. |
| **start timestamp [ns]** | UTC timestamp in nanoseconds of the start of the fixation. |
| **end timestamp [ns]** | UTC timestamp in nanoseconds of the end of the fixation. |
| **duration [ms]** | Duration of the fixation in milliseconds. |
| **fixation detected in reference image** | Boolean indicating whether or not the fixation was inside or outside of the reference image. |
| **fixation x [px]** | Float value representing the x-coordinate of the fixation in reference image coordinates. This position is the average of all mapped gaze samples within the fixation. |
| **fixation y [px]** | Same as "fixation x [px]" but for the y-coordinate. |
| Field | Description |
| ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **section id** | Unique identifier of the corresponding section. |
| **recording id** | Unique identifier of the recording this sample belongs to. |
| **fixation id** | Identifier of fixation within the section. The id corresponds to the fixation id of the raw unmapped data. |
| **start timestamp [ns]** | UTC timestamp in nanoseconds of the start of the fixation. |
| **end timestamp [ns]** | UTC timestamp in nanoseconds of the end of the fixation. |
| **duration [ms]** | Duration of the fixation in milliseconds. |
| **fixation detected in reference image** | Boolean indicating whether or not the fixation was inside or outside of the reference image. |
| **fixation x [px]** | Float value representing the x-coordinate of the fixation in reference image coordinates. This position is the average of all mapped gaze samples within the fixation. |
| **fixation y [px]** | Same as "fixation x [px]" but for the y-coordinate. |

### Reference Image
The reference image that was used for defining the enrichment. The file is named `reference_image.jpeg|png`.

The reference image that was used for defining the enrichment. The file is named `reference_image.jpeg|png`.
Binary file not shown.
7 changes: 7 additions & 0 deletions neon/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -14,4 +14,11 @@ module.exports = {
},
},
plugins: [],
safelist: [
{
pattern: /grid-cols-(1|2|3|4|5)/,
},
"^sm:grid-cols-",
"m-auto",
],
};