Merge pull request #648 from pupil-labs/neon_player

Neon Player Docs

.gitignore

@@ -132,4 +132,8 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
-.pnp.*
+.pnp.*
+
+# build all docs scripts
+serve.js
+build_all.sh

components/DownloadLinks.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="button-container">
+    <button @click="download" class="download-button">
+      <img :src="icon" alt="Download Icon" class="button-icon" />
+      {{ text }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DownloadLinks",
+  props: {
+    src: {
+      type: String,
+      required: true,
+    },
+    text: {
+      type: String,
+      default: "Download",
+    },
+    icon: {
+      type: String,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      urlWindows: "",
+      urlMac: "",
+      urlLinux: "",
+    };
+  },
+  mounted() {
+    fetch(this.src)
+      .then((response) => response.json())
+      .then((data) => {
+        data.assets.forEach((asset) => {
+          if (asset.browser_download_url.includes("windows")) {
+            this.urlWindows = asset.browser_download_url;
+          } else if (asset.browser_download_url.includes("linux")) {
+            this.urlLinux = asset.browser_download_url;
+          } else if (asset.browser_download_url.includes("macos")) {
+            this.urlMac = asset.browser_download_url;
+          }
+        });
+      })
+      .catch((error) => console.error("Error:", error));
+  },
+  methods: {
+    download() {
+      const platform = navigator.platform.toLowerCase();
+
+      if (platform.includes("win")) {
+        window.location.href = this.urlWindows;
+      } else if (platform.includes("mac")) {
+        window.location.href = this.urlMac;
+      } else if (platform.includes("linux")) {
+        window.location.href = this.urlLinux;
+      } else {
+        console.log("Unsupported platform");
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100h;
+}
+.download-button {
+  background-color: var(#0d122a, white);
+  color: var(white, black);
+  border: none;
+  padding: 10px 20px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-family: Arial, sans-serif;
+  font-weight: 500;
+  font-size: 24px;
+  box-shadow: inset 0 0 0 2px #455a64;
+}
+.download-button:hover {
+  box-shadow: inset 0 0 0 3px #455a64;
+  font-weight: 530;
+}
+
+.button-icon {
+  height: 30px;
+  margin-right: 8px;
+}
+</style>

core/getting-started/index.md

@@ -1,19 +1,27 @@
 ---
 description: Welcome to Pupil Core! This section will guide you through setup (software and hardware) in order for you to make your first recording with Pupil Core.
 
-sidebar: false 
+sidebar: false
 ---
 
+<script setup>
+import DownloadLinks from '@components/DownloadLinks.vue'
+</script>
+
 # Getting Started
+
 Welcome to Pupil Core! The first thing you need to do is download the latest Pupil Core software.
 
-<!-- <DownloadLinks/> -->
-[Download it here](https://github.com/pupil-labs/pupil/releases/tag/v3.5)
+<download-links
+  src="https://api.github.com/repos/pupil-labs/pupil/releases/latest"
+  text="Download Pupil Core Bundles"
+  icon="./bundle-core.svg"
+/>
 
 Follow the steps below to get up and running and become familiar with the workflow.
 
-
 ## 1. Put on Pupil Core
+
 Put on the Pupil Core headset and plug it into your computer.
 
 Make sure there is space between the headset frame and your forehead. Headsets are adjustable and shipped with additional parts. For more information head over to the [Hardware](/hardware/ "Pupil Core hardware documentation") section of the docs.
@@ -34,16 +42,12 @@ Take a look at the eye window(s).
 
 Slide the cameras along the headset frame and rotate them on the ball joint, until you get a clear image of both eyes. Make sure that your pupil is always visible, even when looking at extreme angles.
 
-
 <Youtube src="kjjPL7gLy7s"/>
 
-
 Pupil Core uses a 3D model of the eye to improve pupil detection. Slowly move your eyes around until the eye model (blue circle) is adjusted to fit your eyeball. If everything is set up properly, you should see a blue circle around the eyeball and a red circle around the pupil with a red dot in the center.
 
-
 <Youtube src="_1ZRgfLJ3hc"/>
 
-
 Next, check the world window.
 
 You will see confidence graphs in the top for each eye. 1.0 = high confidence pupil detection. 0.0 = no confidence.
@@ -53,14 +57,15 @@ Tip - There is another way to build the 3d model. You can also move your head ar
 :::
 
 ## 4. Calibration
+
 In order to know what someone is looking at, we must establish a mapping between pupil and gaze positions. This is what we call calibration. The calibration process establishes a mapping from pupil to gaze coordinates.
 
 <video width="100%" controls>
   <source src="./clb-hd.mp4" type="video/mp4">
 </video>
 
-
 #### Screen Marker Calibration Method
+
 Click `c` on the world screen or press `c` on the keyboard to start calibrating.
 Follow the marker on the screen with your eyes and try to keep your head stationary.
 
@@ -99,13 +104,15 @@ recordings/
 ```
 
 ## 7. Visualize in Pupil Player
+
 Launch Pupil Player. Then drag and drop the recording folder (e.g `001`) onto the Pupil Player window.
 
 ![Pupil Player Icon](./pp.png)
 
 Player comes with a number of plugins. Plugins are classified by their use-case. Visualization plugins can be additive. This means that you can add multiple instances of a plugin to build up a visualization.
 
 ## 8. Export Data
+
 You can export videos and data by pressing `e` on your keyboard or the down arrow button in the Pupil Player window.
 
 Exports are saved within a dedicated folder named exports within the original recording folder.