TPS Landmark Editor

A Visual Studio Code extension for editing TPS (Thin Plate Spline) files with interactive landmark point manipulation and real-time coordinate updates.

Demo

Interactive landmark editing with real-time coordinate updates, file navigation, and customizable visual settings.

Features

Core Functionality

• Open TPS files: Load and parse TPS files containing landmark coordinates
• Display images: Show the associated image file referenced in the TPS file
• Interactive landmarks: View landmark points overlaid on the image as customizable circles
• Drag and drop: Move landmark points by dragging them to new positions
• Real-time updates: See coordinate changes in real-time as you move points
• Save changes: Save updated landmark coordinates back to the TPS file

Navigation & File Management

• File navigation: Navigate between multiple TPS files in the same directory
• Next/Previous buttons: Seamlessly move between TPS files
• Smart file discovery: Automatically finds all TPS files in the current directory
• Image scaling: Images automatically scale to fit the viewer while maintaining aspect ratio

Visual Customization

• Settings panel: Comprehensive settings panel accessible via gear button (⚙️)
• Circle size control: Adjust landmark point size from 4px to 20px with live preview
• Color customization: Choose custom colors for landmark circles and borders
• Transparency control: Independent opacity sliders for inner and border colors
• Real-time preview: All changes apply immediately to existing landmarks

Settings Management

• Persistent settings: Settings automatically persist during navigation between files
• App-level defaults: Save current settings as your personal app defaults (💾)
• Reset functionality: Reset to your last saved settings (🔄)
• Workspace-specific: Each workspace maintains its own settings configuration
• No file dialogs: Settings are managed internally for seamless workflow

Usage

Getting Started

1. Open a TPS file: Right-click on a .tps file in the Explorer and select "Open TPS Landmark Editor"

   • Or use the command palette (Ctrl+Shift+P) and run "Open TPS Landmark Editor" while a TPS file is active
   • Or click the eye icon in the editor title bar when viewing a TPS file

2. View landmarks: The extension will display the associated image (if found) with landmark points overlaid as colored circles

Working with Landmarks

3. Move points: Click and drag any landmark point to reposition it on the image
4. Save changes: Click the "Save Changes" button to write the updated coordinates back to the TPS file

Navigation

5. Navigate files: Use the "← Previous" and "Next →" buttons to move between TPS files in the same directory
6. File context: The viewer shows your current position (e.g., "File 2 of 5") for easy tracking

Customization

7. Open settings: Click the gear button (⚙️) to access the settings panel
8. Adjust appearance:
   • Use the Circle Size slider to change landmark point size (4-20px)
   • Pick Inner Color and adjust its opacity with the slider
   • Pick Border Color and adjust its opacity independently
   • Changes apply instantly to all landmarks

Settings Management

9. Save preferences: Click the save button (💾) to make your current settings the new app defaults
10. Reset settings: Click the reset button (🔄) to revert to your last saved configuration

TPS File Format

This extension supports the standard TPS file format:

LM=<number_of_landmarks>
<x1> <y1>
<x2> <y2>
...
<xn> <yn>
IMAGE=<image_filename>
ID=<specimen_id>

Requirements

• Visual Studio Code 1.103.0 or higher
• TPS files should reference image files in the same directory

Settings Storage

The extension stores your personalized settings in:

• Location: <workspace>/.vscode/tps-landmark-settings.json
• Format: JSON file containing your preferred circle size, colors, and opacity values
• Scope: Settings are workspace-specific, allowing different configurations per project
• Persistence: Settings survive VS Code restarts and extension updates

Installation

1. Clone or download this repository
2. Open the folder in VS Code
3. Run npm install to install dependencies
4. Press F5 to launch a new Extension Development Host window
5. Open a TPS file and test the functionality

Development

To set up the development environment:

# Install dependencies
npm install

# Compile the extension
npm run compile

# Watch for changes
npm run watch

# Launch extension in development mode
code --extensionDevelopmentPath="." --new-window

# Run tests
npm test

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.