mirror of
https://github.com/EyeTrackVR/EyeTrackVR-Docs.git
synced 2025-09-26 23:09:15 +08:00
docs: most of new parts list WIP
This commit is contained in:
parent
9753e4231d
commit
3e5db628da
@ -7,6 +7,17 @@ export default defineConfig({
|
||||
srcDir: './src/pages',
|
||||
cleanUrls: 'with-subfolders',
|
||||
ignoreDeadLinks: true,
|
||||
head: [
|
||||
// Corrected script tag example
|
||||
[
|
||||
'script',
|
||||
{
|
||||
async: true,
|
||||
src: '/src/assets/diy.js' // Corrected path format
|
||||
}
|
||||
]
|
||||
],
|
||||
|
||||
/* head: [
|
||||
[
|
||||
'link',
|
||||
|
@ -47,6 +47,7 @@ const theme = {
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: "Part List", link: "/how_to_build/parts_list" },
|
||||
{ text: "slimeList", link: "/how_to_build/part_list" },
|
||||
{
|
||||
text: "Protecting Cameras",
|
||||
link: "/how_to_build/protecting_cameras"
|
||||
|
219
vitepress/docs/src/pages/how_to_build/DiyTable.vue
Normal file
219
vitepress/docs/src/pages/how_to_build/DiyTable.vue
Normal file
@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Choice</th>
|
||||
<th>Amount</th>
|
||||
<th>Cost</th>
|
||||
<th>Cost All</th>
|
||||
<th>Links</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="component in components" :key="component.name">
|
||||
<th>{{ component.name }}</th>
|
||||
<td>
|
||||
<select v-if="component.choices.length > 1" v-model="component.selectedChoice" @change="updatePrices">
|
||||
<option v-for="(choice, index) in component.choices" :key="index" :value="index">{{ choice.name }}</option>
|
||||
</select>
|
||||
<span v-else>{{ component.choices[0].name }}</span>
|
||||
</td>
|
||||
<td>{{ component.selectedChoice ? component.choices[component.selectedChoice].amount(tracker) : 0 }}</td>
|
||||
<td>{{ component.selectedChoice ? '$' + component.choices[component.selectedChoice].cost : 0 }}</td>
|
||||
<td>{{ component.selectedChoice ? '~$' + (component.choices[component.selectedChoice].costAll(tracker) * 100) / 100 : 0 }}</td>
|
||||
<td v-html="component.selectedChoice ? component.choices[component.selectedChoice].links : ''"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Total: ${{ total.toFixed(2) }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tracker: 2,
|
||||
components: [
|
||||
{
|
||||
name: 'ESP Microcontroller',
|
||||
choices: [
|
||||
|
||||
{
|
||||
name: 'Bring Your Own',
|
||||
amount: () => this.tracker,
|
||||
cost: 1.85,
|
||||
costAll: () => this.tracker * 0 ,
|
||||
links: 'If you already have a supported camera capable ESP32 or sourced elsewhere.'
|
||||
},
|
||||
{
|
||||
name: 'Seeed Studio XIAO Sense ESP32-S3',
|
||||
amount: () => this.tracker,
|
||||
cost: 12.87,
|
||||
costAll: () => this.tracker * 12.87 + 3.18,
|
||||
links: '<a href="https://www.aliexpress.com/item/3256804601970891.html">AliExpress XIAO Sense</a> Recommended'
|
||||
},
|
||||
{
|
||||
name: 'ESP32-CAM',
|
||||
amount: () => this.tracker,
|
||||
cost: 12.87,
|
||||
costAll: () => this.tracker * 4.69 + 3.18,
|
||||
links: '<a href="https://www.aliexpress.us/item/3256806008099661.html">AliExpress ESP32 CAM</a> Requires additional programmer'
|
||||
}
|
||||
|
||||
],
|
||||
selectedChoice: 1
|
||||
},
|
||||
{
|
||||
name: 'Camera',
|
||||
choices: [
|
||||
|
||||
{
|
||||
name: 'Bring Your Own',
|
||||
amount: () => this.tracker,
|
||||
cost: 0,
|
||||
costAll: () => this.tracker * 0 ,
|
||||
links: 'If you already have a supported camera or sourced elsewhere.'
|
||||
},
|
||||
{
|
||||
name: '130 Degree NO-IR',
|
||||
amount: () => this.tracker,
|
||||
cost: 5.41,
|
||||
costAll: () => this.tracker * 5.41,
|
||||
links: '<a href="https://www.aliexpress.com/item/3256802853835121.html">AliExpress</a> Select "Color: 75MM-130 Degree" Must manually remove IR filter'
|
||||
},
|
||||
{
|
||||
name: '160 Degree IR',
|
||||
amount: () => this.tracker,
|
||||
cost: 4.26,
|
||||
costAll: () => this.tracker * 4.26,
|
||||
links: '<a href="https://www.aliexpress.com/item/3256802853835121.html">AliExpress</a> Select "Color: 75MM-160 850nm"'
|
||||
}
|
||||
|
||||
],
|
||||
selectedChoice: 1
|
||||
},
|
||||
{
|
||||
name: 'IR LEDs',
|
||||
choices: [
|
||||
{
|
||||
name: 'Bring Your Own',
|
||||
amount: () => this.tracker,
|
||||
cost: 0,
|
||||
costAll: () => this.tracker * 0 ,
|
||||
links: 'If you already have safe IR LED hardware and know what you are doing.'
|
||||
},
|
||||
{
|
||||
name: 'Official V4 mini Solder-less Kit',
|
||||
amount: () => 1,
|
||||
cost: 28,
|
||||
costAll: () => this.tracker + 28 + 3,
|
||||
links: '<a href="https://store.eyetrackvr.dev/products/v4-mini-fully-solderless-kit">ETVR Store</a> Length depending on HMD'
|
||||
},
|
||||
{
|
||||
name: 'Official V4 mini Bring Your Own Wires Kit',
|
||||
amount: () => 1,
|
||||
cost: 24,
|
||||
costAll: () => this.tracker + 24 + 3,
|
||||
links: '<a href="https://store.eyetrackvr.dev/products/v4-mini-some-assemblly-required">AliExpress</a> Must solder up your own wires'
|
||||
},
|
||||
{
|
||||
name: 'Official V4 lite Assemble Yourself',
|
||||
amount: () => 1,
|
||||
cost: 7,
|
||||
costAll: () => this.tracker + 7 + 3,
|
||||
links: '<a href="https://store.eyetrackvr.dev/products/v4-1-lite-diy-led-kit">AliExpress</a> Must assemble yourself'
|
||||
},
|
||||
],
|
||||
selectedChoice: 1
|
||||
},
|
||||
{
|
||||
name: 'USB Hub',
|
||||
choices: [
|
||||
{
|
||||
name: 'Bring Your Own',
|
||||
amount: () => this.tracker,
|
||||
cost: 0,
|
||||
costAll: () => this.tracker * 0,
|
||||
links: 'If you already have safe IR LED hardware and know what you are doing.'
|
||||
},
|
||||
{
|
||||
name: '4 port USB 3.2 LDLrui (MTT Usually)',
|
||||
amount: () => 1,
|
||||
cost: 17.99,
|
||||
costAll: () => this.tracker + 17.99,
|
||||
links: '<a href="https://www.amazon.com/dp/B09NDQRLBT/">Amazon</a> Usually these are MTT, but sometimes not'
|
||||
},
|
||||
{
|
||||
name: '4 port USB 3.2 Sitecom CN-385 Hub (MTT)',
|
||||
amount: () => 1,
|
||||
cost: 40.53,
|
||||
costAll: () => this.tracker + 17.99,
|
||||
links: '<a href="https://www.amazon.com/gp/product/B07YN54Q33/">Amazon</a> Known good MTT hub, but expensive'
|
||||
},
|
||||
{
|
||||
name: '4 port USB 2.0 Breakout (Not MTT)',
|
||||
amount: () => 1,
|
||||
cost: 1.41,
|
||||
costAll: () => this.tracker + 1.41 + 1.99,
|
||||
links: '<a href="https://www.aliexpress.us/item/3256801220206638.html">AliExpress</a> Small but non MTT hub breakout'
|
||||
},
|
||||
{
|
||||
name: '3 port USB 3.0 Hub With Power Passthrough (Not MTT)',
|
||||
amount: () => 1,
|
||||
cost: 17.99,
|
||||
costAll: () => this.tracker + 1.41,
|
||||
links: '<a href="https://www.amazon.com/uni-Charging-Thunderbolt-Aluminum-Pixelbook/dp/B08SVZFFPP/">Amazon</a> Great for Quest due to power passthrough'
|
||||
},
|
||||
],
|
||||
selectedChoice: 1
|
||||
},
|
||||
{
|
||||
name: '3D Printed Mounts',
|
||||
choices: [
|
||||
{
|
||||
name: 'Print Yourself',
|
||||
amount: () => this.tracker,
|
||||
cost: 0,
|
||||
costAll: () => this.tracker * 0,
|
||||
links: 'If you have a 3d printer or have access to one somewhere.'
|
||||
},
|
||||
{
|
||||
name: 'JLCPCB Print Service, JLC3DP',
|
||||
amount: () => this.tracker,
|
||||
cost: 2,
|
||||
costAll: () => this.tracker * 2 + 5,
|
||||
links: '<a href="https://jlc3dp.com/3d-printing-quote">JLC3DP</a> '
|
||||
},
|
||||
],
|
||||
selectedChoice: 0
|
||||
},
|
||||
|
||||
|
||||
// Add other components similarly
|
||||
],
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updatePrices() {
|
||||
let total = 0;
|
||||
this.components.forEach(component => {
|
||||
if (component.choices.length > 1) {
|
||||
const choice = component.choices[component.selectedChoice];
|
||||
total += choice.costAll();
|
||||
}
|
||||
});
|
||||
this.total = total;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.updatePrices();
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/* Your styles here */
|
||||
</style>
|
198
vitepress/docs/src/pages/how_to_build/OptionalDiyTable.vue
Normal file
198
vitepress/docs/src/pages/how_to_build/OptionalDiyTable.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Choice</th>
|
||||
<th>Amount</th>
|
||||
<th>Cost</th>
|
||||
<th>Cost All</th>
|
||||
<th>Links</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="component in components" :key="component.name">
|
||||
<th>{{ component.name }}</th>
|
||||
<td>
|
||||
<select v-if="component.choices.length > 1" v-model="component.selectedChoice" @change="updatePrices">
|
||||
<option v-for="(choice, index) in component.choices" :key="index" :value="index">{{ choice.name }}</option>
|
||||
</select>
|
||||
<span v-else>{{ component.choices[0].name }}</span>
|
||||
</td>
|
||||
<td>{{ component.selectedChoice ? component.choices[component.selectedChoice].amount(tracker) : 0 }}</td>
|
||||
<td>{{ component.selectedChoice ? '$' + component.choices[component.selectedChoice].cost : 0 }}</td>
|
||||
<td>{{ component.selectedChoice ? '~$' + (component.choices[component.selectedChoice].costAll(tracker) * 100) / 100 : 0 }}</td>
|
||||
<td v-html="component.selectedChoice ? component.choices[component.selectedChoice].links : ''"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Total: ${{ total.toFixed(2) }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tracker: 2,
|
||||
components: [
|
||||
{
|
||||
name: 'Type A USB Breakout',
|
||||
choices: [
|
||||
|
||||
{
|
||||
name: 'Bring Your Own',
|
||||
amount: () => this.tracker,
|
||||
cost: 1.85,
|
||||
costAll: () => this.tracker * 0 ,
|
||||
links: 'If you do not need or already have.'
|
||||
},
|
||||
{
|
||||
name: 'Type A USB Breakout Bare (AliExpress)',
|
||||
amount: () => 1,
|
||||
cost: 1.18,
|
||||
costAll: () => this.tracker + 1.18,
|
||||
links: '<a href="https://www.aliexpress.us/item/2255801092919590.html">AliExpress</a>'
|
||||
},
|
||||
{
|
||||
name: 'Type A USB Breakout Bare (Amazon)',
|
||||
amount: () => 1,
|
||||
cost: 6.49,
|
||||
costAll: () => this.tracker + 5.49,
|
||||
links: '<a href="https://www.amazon.com/10Gtek-DIP-Breakout-Adapter-2-54mm/dp/B09LC8WQCD/">Amazon</a>'
|
||||
},
|
||||
{
|
||||
name: 'Type A USB Breakout With Cover (AliExpress)',
|
||||
amount: () => 1,
|
||||
cost: 2.20,
|
||||
costAll: () => this.tracker + 1.20 + 1.99,
|
||||
links: '<a href="https://www.aliexpress.us/item/2251832820552545.html/">AliExpress</a>'
|
||||
},
|
||||
{
|
||||
name: 'Type A USB Breakout With Wire and Cover (Amazon)',
|
||||
amount: () => 1,
|
||||
cost: 9.60,
|
||||
costAll: () => this.tracker + 8.60,
|
||||
links: '<a href="https://www.amazon.com/Pigtail-Extension-Cables-Connector-Replacement/dp/B09ZQNJ2DJ/">Amazon</a>'
|
||||
},
|
||||
],
|
||||
selectedChoice: 1
|
||||
},
|
||||
{
|
||||
name: 'Wire for ESPs',
|
||||
choices: [
|
||||
|
||||
{
|
||||
name: 'Bring Your Own',
|
||||
amount: () => this.tracker,
|
||||
cost: 0,
|
||||
costAll: () => this.tracker * 0 ,
|
||||
links: 'If you do not need wire or already have.'
|
||||
},
|
||||
{
|
||||
name: 'Silicone Wire Kit',
|
||||
amount: () => 1,
|
||||
cost: 5.96,
|
||||
costAll: () => this.tracker + 5.96 + 0.99,
|
||||
links: '<a href="https://www.aliexpress.us/item/3256806164419666.html">AliExpress</a> 30 AWG or lower'
|
||||
},
|
||||
{
|
||||
name: 'Generic Wire',
|
||||
amount: () => 1,
|
||||
cost: 0.70,
|
||||
costAll: () => this.tracker + 0.70 + 1.24,
|
||||
links: '<a href="https://a.aliexpress.com/_mK72cy6">AliExpress</a> Select "Specification: 30 AWG or lower"'
|
||||
},
|
||||
],
|
||||
selectedChoice: 1
|
||||
},
|
||||
{
|
||||
name: 'Wire for LEDs',
|
||||
choices: [
|
||||
|
||||
{
|
||||
name: 'Bring Your Own',
|
||||
amount: () => this.tracker,
|
||||
cost: 0,
|
||||
costAll: () => this.tracker * 0 ,
|
||||
links: 'If you do not need wire or already have.'
|
||||
},
|
||||
{
|
||||
name: 'Silicone Wire Kit',
|
||||
amount: () => 1,
|
||||
cost: 5.96,
|
||||
costAll: () => this.tracker + 5.96 + 0.99,
|
||||
links: '<a href="https://www.aliexpress.us/item/3256806164419666.html">AliExpress</a> 30 AWG or higher'
|
||||
},
|
||||
{
|
||||
name: 'Generic Wire',
|
||||
amount: () => 1,
|
||||
cost: 0.70,
|
||||
costAll: () => this.tracker + 0.70 + 1.24,
|
||||
links: '<a href="https://a.aliexpress.com/_mK72cy6">AliExpress</a> Select "Specification: 30 AWG or higher"'
|
||||
},
|
||||
],
|
||||
selectedChoice: 1
|
||||
},
|
||||
{
|
||||
name: 'IR LEDs',
|
||||
choices: [
|
||||
{
|
||||
name: 'Bring Your Own',
|
||||
amount: () => this.tracker,
|
||||
cost: 0,
|
||||
costAll: () => this.tracker * 0,
|
||||
links: 'If you already have safe IR LED hardware and know what you are doing.'
|
||||
},
|
||||
{
|
||||
name: 'Official V4 mini Solder-less Kit',
|
||||
amount: () => 1,
|
||||
cost: 28,
|
||||
costAll: () => this.tracker + 28 + 3,
|
||||
links: '<a href="https://store.eyetrackvr.dev/products/v4-mini-fully-solderless-kit">ETVR Store</a> Length depending on HMD'
|
||||
},
|
||||
{
|
||||
name: 'Official V4 mini Bring Your Own Wires Kit',
|
||||
amount: () => 1,
|
||||
cost: 24,
|
||||
costAll: () => this.tracker + 24 + 3,
|
||||
links: '<a href="https://store.eyetrackvr.dev/products/v4-mini-some-assemblly-required">AliExpress</a> Must solder up your own wires'
|
||||
},
|
||||
{
|
||||
name: 'Official V4 lite Assemble Yourself',
|
||||
amount: () => 1,
|
||||
cost: 7,
|
||||
costAll: () => this.tracker + 7 + 3,
|
||||
links: '<a href="https://store.eyetrackvr.dev/products/v4-1-lite-diy-led-kit">AliExpress</a> Must assemble yourself'
|
||||
},
|
||||
],
|
||||
selectedChoice: 1
|
||||
},
|
||||
|
||||
|
||||
// Add other components similarly
|
||||
],
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updatePrices() {
|
||||
let total = 0;
|
||||
this.components.forEach(component => {
|
||||
if (component.choices.length > 1) {
|
||||
const choice = component.choices[component.selectedChoice];
|
||||
total += choice.costAll();
|
||||
}
|
||||
});
|
||||
this.total = total;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.updatePrices();
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/* Your styles here */
|
||||
</style>
|
16
vitepress/docs/src/pages/how_to_build/part_list.md
Normal file
16
vitepress/docs/src/pages/how_to_build/part_list.md
Normal file
@ -0,0 +1,16 @@
|
||||
<script setup>
|
||||
import DiyTable from './DiyTable.vue'
|
||||
import OptionalDiyTable from './OptionalDiyTable.vue'
|
||||
</script>
|
||||
|
||||
# Required Parts
|
||||
|
||||
|
||||
|
||||
<DiyTable />
|
||||
|
||||
# Additional Parts
|
||||
|
||||
<OptionalDiyTable />
|
||||
|
||||
...
|
Loading…
Reference in New Issue
Block a user