# Development

## Technology Stack

- **Frontend**: Vue 3 + TypeScript + Vite
- **3D Engine**: Babylon.js
- **Backend**: Node.js + Express
- **Database**: SQLite with better-sqlite3

## Prerequisites

- Node.js (version ^20.19.0 || >=22.12.0)
- npm or yarn package manager

## Installation

1. Clone the repository:
```bash
git clone <repository-url>
cd motionDataViewer
```

2. Install dependencies:
```bash
npm install
```

## Development

### Start Development Server

To run both frontend and backend servers simultaneously:
```bash
npm run dev:full
```

Or start them separately:
```bash
# Frontend only
npm run dev

# Backend only
npm run server
```


## Production Build

### Build for Production

```bash
npm run build
```

### Preview Production Build

```bash
npm run preview
```

## Development Tools

### Type Checking

```bash
npm run type-check
```

### Linting

```bash
npm run lint
```

### Code Formatting

```bash
npm run format
```

## Project Structure

```
motionDataViewer/
├── public/                 # Static assets
│   ├── glbs/              # 3D model files (.glb)
│   └── *.json             # Physics simulation metadata files
├── src/
│   ├── components/        # Vue components
│   │   └── dataViewer.vue # Main 3D viewer component
│   ├── utils/             # Utility functions
│   │   ├── AnimationGroup.ts # Motion data class
│   │   ├── tools.ts       # Utility functions
│   │   ├── database.ts    # Database management
│   │   ├── loadMotion.ts  # Motion data loading
│   │   └── translations.ts # Chinese-English switching support
│   └── assets/            # CSS and static assets
├── server.js              # Express backend server
└── config.env             # Environment configuration
```

## Usage

1. Start the application using `npm run dev:full`
2. Open your browser and navigate to localhost:5173
3. Use the control panel to navigate between different motion data files
4. Use the search panel to filter motion data by various criteria
5. Observe motion data in 3D view
6. View data visualizations and charts for detailed analysis

## Download Motion Database

1. **Download Motion Database:**
   - **Google Drive**: Visit [Motion Database Download Link](https://drive.google.com/file/d/112pnjuIuNqADS-fAT6RUIAVPtb3VlWlq/view?usp=drive_link)
   - **Baidu Netdisk**: Visit [Motion Database Download Link](https://pan.baidu.com/s/1YCisRewRQQdYT-GzCZxu-w) (Extraction code: `wwqm`)
   - Choose the appropriate download method based on your network conditions and download the compressed motion database file

2. **Extract and Organize Data:**
   - Extract the downloaded file to the project root directory

## Configuration

Edit `config.env` to configure database settings and other environment variables. Ensure the database is set to the directory of the downloaded files.