TARA Acupoint viewer

A tool designed to integrate 3D whole body images, models and annotations.

Table of Contents

• Overview
• Getting Started
  • Import And Export Acupoints Information
  • Navigating and interacting...
  • Adding acupoints
  • Editing acupoint information
  • Editing acupoint location
• TARA ScaffoldVuer on NPM
  • Prerequisites
  • Installation
  • Usage
    • Props & Events:
• Development & Build
  • To contribute or modify locally:
  • Run the app locally:
  • To build for distribution:
• License

Overview

TARA Acupoint viewer is a Vue component/framework that enables you to load, display and interact with MRI images in the 3D scaffold model framework. It supports annotation and discovery of acupoint information.

Getting Started

Import And Export Acupoints Information

1. Acupoint information can be imported and exported using the Import / Export button on the top left.

2. All created acupoints will be imported or exported

3. It is recommended to export often to prevent information lost

Navigating and interacting with the images, acupoints and 3D volume

1. Find an acupoint: Find an acupoint of interest by clicking on any acupoint in MRI image or search for it by name on the sidebar search field. Associated information of the selected acupoint will be displayed in the sidebar.

2. Adjust region visibility: Use the Regions tree in the sidebar to toggle the visibility (show or hide) of different anatomical regions on the 3D model.

3. Manage image slices: Click the "Images" entry in the Regions tree to open the slice control panel. Use these controls to add new image slices or change the position (using the X, Y, Z sliders) of existing ones.

Adding acupoints

1. Set Interactive Mode to Create at the top left corner

2. Click on a desired location on the image or the surface of the 3D volume

3. A dialog will appear, enter the region and group name (this will be used as the display name for the acupoints) then press confirm to create a point.

4. After creating a new acupoint, a new entry will be added to the sidebar

Editing acupoint information

1. Search or navigate to the acupoint you want to edit on the sidebar

2. Click on any of the fields you wish to edit and a text editing area will appear, you may now add/edit the information

Editing acupoint location

1. Set Interactive Mode to Edit at the top left corner

2. Click on created points, make sure the label is displaying the correct information

3. Move to a desired location, click and a prompt will appear and ask for confirmation, press Edit to confirm:

TARA ScaffoldVuer on NPM

Prerequisites

• Node.js

• A Vue project

Installation

• npm i @abi-software/tara-scaffoldvuer

Usage

How to integrate With Your Vue App

Install the package in your vue app project with the following command "npm i @abi-software/tara-scaffoldvuer". Import the package in your script as followed:

<script setup>

</script>

<template>
  <div id="app">
    <TaraScaffoldVuer :url="url"/>
  </div>
</template>

<script>
import { TaraScaffoldVuer } from '@abi-software/tara-scaffoldvuer';
import "@abi-software/tara-scaffoldvuer/dist/style.css";

export default {
  name: "app",
  data: function () {
    return {
      url: "Some URL"
    }
  }
}
</script>

Props & Events

• url (String): The URL or path to the model metadata (JSON)
• @scaffold-selected: Event emitted when a part is selected; the callback receives the annotation/object

Development & Build

To contribute or modify locally

• git clone https://github.com/abi-software/TARA-ScaffoldVuer.git

• In your terminal:

cd TARA-ScaffoldVuer
npm install

Run the app locally

npm run serve

This will allow you to view and test the component in action and inspect how it handles model loading, events, etc.

To build for distribution:

npm run build-bundle

License

This project is licensed under the MIT License — see the LICENSE file for details.