Skip to content

Extract GettingStartedCard component from Session.vue #2

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.

Sign up for GitHub

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

Draft
Copilot wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Extract GettingStartedCard component from Session.vue #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c90f975
Initial plan
Copilot Jan 2, 2026
2e3e6d2
Extract GettingStartedCard component from Session.vue
Copilot Jan 2, 2026
5c4ebfd
Remove empty style block from GettingStartedCard component
Copilot Jan 2, 2026
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
92 changes: 10 additions & 82 deletions src/components/pages/Session.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,87 +286,10 @@


<!-- Getting Started Section (shown when no files are loaded) -->
<div v-if="animations.length === 0 && smplSequences.length === 0 && !converting && Object.keys(markersDatasets).length === 0" class="getting-started-section mb-4">
<v-card dark class="pa-4" style="background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1);">
<div class="d-flex align-center mb-3">
<v-icon color="primary" class="mr-2">mdi-information-outline</v-icon>
<h3 class="text-subtitle-1">Getting Started</h3>
</div>

<div class="text-caption mb-3">
<strong>Import Methods:</strong>
</div>

<div class="mb-3">
<v-btn
color="primary"
small
outlined
block
@click="showSampleSelectionDialog = true"
class="mb-2"
>
<v-icon left small>mdi-play-circle</v-icon>
Try Sample Data
</v-btn>
<div class="text-caption grey--text mb-3">
Explore with pre-loaded motion capture data
</div>

</div>

<v-divider class="my-3" style="opacity: 0.3;"></v-divider>

<div class="text-caption mb-2">
<strong>Workflow Options:</strong>
</div>

<div class="workflow-steps text-caption">
<div class="step-item mb-2">
<div class="d-flex align-center">
<v-icon x-small color="orange" class="mr-2">mdi-numeric-1-circle</v-icon>
<span class="font-weight-medium">OpenSim Files</span>
</div>
<div class="ml-5 grey--text">
Upload .osim model + .mot motion files
</div>
</div>

<div class="step-item mb-2">
<div class="d-flex align-center">
<v-icon x-small color="indigo" class="mr-2">mdi-numeric-2-circle</v-icon>
<span class="font-weight-medium">Motion Data</span>
</div>
<div class="ml-5 grey--text">
Load .json files or .trc marker files
</div>
</div>

<div class="step-item mb-2">
<div class="d-flex align-center">
<v-icon x-small color="green" class="mr-2">mdi-numeric-3-circle</v-icon>
<span class="font-weight-medium">Enhance</span>
</div>
<div class="ml-5 grey--text">
Add forces (.mot), video, or 3D models
</div>
</div>
</div>

<v-divider class="my-3" style="opacity: 0.3;"></v-divider>

<div class="text-caption mb-2">
<strong>Tips:</strong>
</div>
<ul class="text-caption grey--text pl-4 mb-0">
<li class="mb-1">Drag & drop files directly into the viewer (.json, .trc, .osim, .mot)</li>
<li class="mb-1">Use Import button for batch uploads</li>
<li class="mb-1">Multiple subjects can be loaded together</li>
<li class="mb-1">.trc files can be loaded independently</li>
<li class="mb-1">.mot force files are automatically detected and positioned at feet</li>
</ul>
</v-card>
</div>
<GettingStartedCard
:show="showGettingStarted"
@show-sample-selection="showSampleSelectionDialog = true"
/>

<!-- Legend -->
<div class="legend flex-grow-1 mb-4">
Expand Down Expand Up @@ -3434,6 +3357,7 @@
import VideoNavigation from '@/components/ui/VideoNavigation'
import SpeedControl from '@/components/ui/SpeedControl'
import CameraControls from '@/components/ui/CameraControls' // Added import
import GettingStartedCard from '@/components/ui/GettingStartedCard'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
Expand Down Expand Up @@ -3500,7 +3424,8 @@
components: {
VideoNavigation,
SpeedControl,
CameraControls // Register component
CameraControls, // Register component
GettingStartedCard
},
data() {
return {
Expand Down Expand Up @@ -3807,6 +3732,9 @@
}
},
computed: {
showGettingStarted() {
return this.animations.length === 0 && this.smplSequences.length === 0 && !this.converting && Object.keys(this.markersDatasets).length === 0;
},
videoControlsDisabled() {
return (!this.trial && this.markerSpheres.length === 0) || this.frames.length === 0
},
Expand Down
106 changes: 106 additions & 0 deletions src/components/ui/GettingStartedCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<template>
<div v-if="show" class="getting-started-section mb-4">
<v-card dark class="pa-4" style="background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1);">
<div class="d-flex align-center mb-3">
<v-icon color="primary" class="mr-2">mdi-information-outline</v-icon>
<h3 class="text-subtitle-1">Getting Started</h3>
</div>

<div class="text-caption mb-3">
<strong>Import Methods:</strong>
</div>

<div class="mb-3">
<v-btn
color="primary"
small
outlined
block
@click="$emit('show-sample-selection')"
class="mb-2"
>
<v-icon left small>mdi-play-circle</v-icon>
Try Sample Data
</v-btn>
<div class="text-caption grey--text mb-3">
Explore with pre-loaded motion capture data
</div>

</div>

<v-divider class="my-3" style="opacity: 0.3;"></v-divider>

<div class="text-caption mb-2">
<strong>Workflow Options:</strong>
</div>

<div class="workflow-steps text-caption">
<div class="step-item mb-2">
<div class="d-flex align-center">
<v-icon x-small color="orange" class="mr-2">mdi-numeric-1-circle</v-icon>
<span class="font-weight-medium">OpenSim Files</span>
</div>
<div class="ml-5 grey--text">
Upload .osim model + .mot motion files
</div>
</div>

<div class="step-item mb-2">
<div class="d-flex align-center">
<v-icon x-small color="indigo" class="mr-2">mdi-numeric-2-circle</v-icon>
<span class="font-weight-medium">Motion Data</span>
</div>
<div class="ml-5 grey--text">
Load .json files or .trc marker files
</div>
</div>

<div class="step-item mb-2">
<div class="d-flex align-center">
<v-icon x-small color="green" class="mr-2">mdi-numeric-3-circle</v-icon>
<span class="font-weight-medium">Enhance</span>
</div>
<div class="ml-5 grey--text">
Add forces (.mot), video, or 3D models
</div>
</div>
</div>

<v-divider class="my-3" style="opacity: 0.3;"></v-divider>

<div class="text-caption mb-2">
<strong>Tips:</strong>
</div>
<ul class="text-caption grey--text pl-4 mb-0">
<li class="mb-1">Drag & drop files directly into the viewer (.json, .trc, .osim, .mot)</li>
<li class="mb-1">Use Import button for batch uploads</li>
<li class="mb-1">Multiple subjects can be loaded together</li>
<li class="mb-1">.trc files can be loaded independently</li>
<li class="mb-1">.mot force files are automatically detected and positioned at feet</li>
</ul>
</v-card>
</div>
</template>

<script>
/**
* GettingStartedCard Component
*
* Displays introductory information and guidance when no files are loaded in the visualizer.
* Shows import methods, workflow options, and helpful tips for getting started.
*
* @emits show-sample-selection - Emitted when the "Try Sample Data" button is clicked
*/
export default {
name: 'GettingStartedCard',
props: {
/**
* Controls whether the getting started card should be displayed
*/
show: {
type: Boolean,
required: true
}
}
}
</script>