### Start Larvitar Development Server

Source: https://github.com/dvisionlab/larvitar/blob/master/README.md

Starts the development server for Larvitar, allowing for local development and testing of the library and its examples.

```bash
yarn run dev
```

--------------------------------

### Basic Viewer Setup

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/guide/examples.md

Demonstrates how to set up a simple viewer using Larvitar's core functionalities. Covers initialization, loading an image, basic viewer controls, inspecting and modifying image metadata, and drag-and-drop image loading.

```html
<div style="text-align: center;">
    <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/246.png" alt="Larvitar" height="200" />
</div>

# Larvitar Examples

Explore these examples to learn how to use Larvitar for various medical imaging tasks. Each example demonstrates a specific functionality, making it easy to get started and see Larvitar in action.

---

## Examples List

### 1. Basic Viewer Setup

Learn how to set up a simple viewer using Larvitar’s core functionalities. This example covers initialization, loading an image, and basic viewer controls.

In this example you can also:

- inspect the metadata of the loaded image
- change some metadata of the loaded image
- drag and drop an image to the viewer

[View Example ➔](https://larvitar.dvisionlab.com/examples/base.html)
```

--------------------------------

### Larvitar Initialization and Setup

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/segmentationTools.html

Initializes various Larvitar modules, registers loaders, and sets the log level.

```JavaScript
// init all
larvitar.initializeImageLoader();
larvitar.initializeCSTools();
larvitar.store.initialize();
larvitar.store.addViewport("viewer");
larvitar.registerNRRDImageLoader();
larvitar.initSegmentationModule();
// set log level to debug
larvitar.setLogLevel("debug");
showSpinner();
```

--------------------------------

### Larvitar Initialization and Viewer Setup

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/4d.html

Initializes Larvitar components, sets the log level, and adds a viewer to the application. This sets up the basic environment for using Larvitar's functionalities.

```javascript
larvitar.initializeImageLoader();
larvitar.initializeCSTools();
larvitar.store.initialize();
larvitar.store.addViewport("viewer");
larvitar.setLogLevel("debug");
```

--------------------------------

### Base HTML Loading and Setup (Cypress)

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/api/modules/tests/cypress.md

Tests the initial loading and setup of the base.html page for the Larvitar DICOM viewer. It verifies viewer visibility and waits for all files to load before proceeding.

```javascript
it("visits the base.html page", () => {
  cy.visit("examples/base.html");
  cy.get("#viewer").should("be.visible");
  cy.wait(1000);
});

it("waits for all files to load", () => {
  cy.wait(1000);
});
```

--------------------------------

### Larvitar Initialization and UI Control

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/singleFrame.html

This snippet shows the basic setup for using the Larvitar library. It includes initializing image loaders, registering viewports, setting the log level, and controlling a loading spinner. It also demonstrates how to clear the cache and prepare for image loading.

```javascript
const spinner = document.getElementById("spinner"); // Show spinner function showSpinner() { spinner.style.display = "block"; } // Hide spinner function hideSpinner() { spinner.style.display = "none"; } let demoFiles = []; // init all larvitar.initializeImageLoader(); larvitar.registerSingleFrameImageLoader(); larvitar.initializeCSTools(); larvitar.store.initialize(); larvitar.store.addViewport("viewer-1"); larvitar.store.addViewport("viewer-2"); larvitar.store.addViewport("viewer-3"); larvitar.store.addViewport("viewer-4"); larvitar.store.addViewport("viewer-5"); // set log level to debug larvitar.setLogLevel("debug"); showSpinner(); larvitar.clearSingleFrameCache();
```

--------------------------------

### Install Larvitar using npm

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/guide/installation.md

Add the Larvitar library to your project's dependencies using npm. Ensure you have Node.js and npm installed.

```bash
npm install larvitar
```

--------------------------------

### Larvitar Initialization and Image Loading Example

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/external.html

This snippet shows the initialization of Larvitar, including setting the log level, registering an external tool, and a detailed example of loading demo files, rendering an image, and managing the image cache. It also includes functions for showing and hiding a spinner.

```javascript
const spinner = document.getElementById("spinner");

function showSpinner() {
    spinner.style.display = "block";
}

function hideSpinner() {
    spinner.style.display = "none";
}

let demoFiles = [];
let counter = 0;

const getDemoFileNames = function () {
    let demoFileList = [];
    for (let i = 1; i < 25; i++) {
        let filename = "anon" + i;
        demoFileList.push(filename);
    }
    return demoFileList;
};

// init all
larvitar.initializeImageLoader();
larvitar.initializeCSTools();
larvitar.store.initialize();
larvitar.store.addViewport("viewer");

// set log level to debug
larvitar.setLogLevel("debug");
larvitar.registerExternalTool("Test", TestTool);

showSpinner();

async function createFile(fileName, cb) {
    let response = await fetch("./demo/" + fileName);
    let data = await response.blob();
    let file = new File([data], fileName);
    demoFiles.push(file);
    counter++;
    if (counter == 24) {
        cb();
    }
}

function renderSerie() {
    larvitar.resetImageManager();
    larvitar
        .readFiles(demoFiles)
        .then(seriesStack => {
            // render the first series of the study
            let seriesId = Object.keys(seriesStack)[0];
            let serie = seriesStack[seriesId];
            larvitar.renderImage(serie, "viewer").then(() => {
                hideSpinner();
                larvitar.logger.debug("Image has been rendered");
                larvitar.addDefaultTools("viewer");
                larvitar.addTool("Test");
                larvitar.setToolActive("Test");
            });
            // optionally cache the series
            larvitar.populateImageManager(seriesId, serie);
            larvitar.cacheImages(serie, function (resp) {
                if (resp.loading == 100) {
                    let cache = larvitar.cornerstone.imageCache;
                    larvitar.logger.debug(
                        "Cache size: ",
                        cache.getCacheInfo().cacheSizeInBytes / 1e6,
                        "Mb"
                    );
                }
            });
        })
        .catch(err => larvitar.logger.error(err));
}

let demoFileList = getDemoFileNames();
demoFileList.forEach(demoFile => {
    createFile(demoFile, renderSerie);
});
```

--------------------------------

### Run Development Server

Source: https://github.com/dvisionlab/larvitar/blob/master/CONTRIBUTING.md

Command to start the development server for previewing changes.

```bash
yarn run dev
```

--------------------------------

### Check Node.js and npm Versions

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/guide/installation.md

Verify that Node.js and npm are installed on your system by checking their respective versions. This is a prerequisite for installing Larvitar.

```bash
node -v
npm -v
```

--------------------------------

### Multiframe Rendering Setup (Cypress)

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/api/modules/tests/cypress.md

Tests the initial loading and setup of the multiframe.html page for the Larvitar DICOM viewer. It verifies viewer visibility and waits for all files to load.

```javascript
it("visits the multiframe.html page", () => {
  cy.visit("examples/multiframe.html");
  cy.get("#viewer").should("be.visible");
  cy.wait(1000);
});

it("waits for all files to load", () => {
  cy.wait(1000);
});
```

--------------------------------

### Dynamic Script Loading and Initialization

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/defaultTools.html

Dynamically loads the Larvitar.js script based on the host environment and initializes Larvitar functionalities, including image loading, CSTools, and viewport setup. It also sets up event listeners for displaying and copying code snippets.

```javascript
const script = document.createElement("script");
if (window.location.host === "larvitar.dvisionlab.com") {
    document.write( '<script src="https://larvitar.dvisionlab.com/assets/larvitar.js"><\/script>' );
} else {
    document.write('<script src="../../dist/larvitar.js"><\/script>');
}

document.head.appendChild(script);

document.addEventListener("DOMContentLoaded", () => {
    const showCodeBtn = document.getElementById("showCodeBtn");
    const codeSnippet = document.getElementById("codeSnippet");
    const copyCodeBtn = document.getElementById("copyCodeBtn");

    const code = `
larvitar.initializeImageLoader();
larvitar.initializeCSTools();
larvitar.store.initialize();
larvitar.store.addViewport("viewer");

larvitar
  .readFiles(demoFiles)
  .then(seriesStack => {
    let seriesId = Object.keys(seriesStack)[0];
    let serie = seriesStack[seriesId];
    larvitar.renderImage(serie, "viewer").then(() => {
      larvitar.addDefaultTools("viewer");
      let mouseConfig = {
        keyboard_shortcuts: {
          KEY_A: "Angle",
          KEY_L: "Length"
        },
        mouse_button_left: {
          ctrl: "Pan",
          default: "Wwwc"
        },
        mouse_button_right: {
          ctrl: "Pan",
          default: "Zoom"
        },
        debug: true
      };
      larvitar.addMouseKeyHandlers(mouseConfig);
    });
  });
`;

    showCodeBtn.addEventListener("click", () => {
        codeSnippet.textContent = code;
        Prism.highlightElement(codeSnippet);
        const codeModal = new bootstrap.Modal(document.getElementById("codeModal"));
        codeModal.show();
    });

    copyCodeBtn.addEventListener("click", () => {
        navigator.clipboard.writeText(code);
    });
});
```

--------------------------------

### Larvitar Initialization and Rendering Example

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/multiframe.html

Initializes Larvitar components, registers loaders, sets up viewports, and renders a series of images. It also includes functionality to control animation playback and update UI elements based on frame changes. Dependencies include the Larvitar library and DOM elements for display.

```javascript
const spinner = document.getElementById("spinner"); // Show spinner function showSpinner() { spinner.style.display = "block"; } // Hide spinner function hideSpinner() { spinner.style.display = "none"; } let demoFiles = []; // init all larvitar.initializeImageLoader(); larvitar.registerMultiFrameImageLoader(); larvitar.initializeCSTools(); larvitar.store.initialize(); larvitar.store.addViewport("viewer"); // set log level to debug larvitar.setLogLevel("debug"); showSpinner(); async function renderSerie() { const t0 = performance.now(); const seriesStack = await larvitar.readFiles(demoFiles); // render the first series of the study let seriesId = Object.keys(seriesStack)[0]; let serie = seriesStack[seriesId]; larvitar.populateImageManager(seriesId, serie); let manager = larvitar.getImageManager(); let multiFrameSerie = manager[seriesId]; let frameId = 0; await larvitar.renderImage(multiFrameSerie, "viewer", { cached: true, imageIndex: frameId }); hideSpinner(); const t1 = performance.now(); larvitar.logger.debug( "Time to render First frame: " + (t1 - t0) + "ms" ); larvitar.addDefaultTools("viewer"); larvitar.setToolActive("StackScroll"); // optionally cache images //await larvitar.loadAndCacheImageStack(multiFrameSerie); // larvitar.logger.debug( // "Stack has been loaded and cached", // multiFrameSerie.bytes / 1048576 // ); // clearInterval(statId); let animation = true; let animationId = null; let numberOfFrames = multiFrameSerie.numberOfFrames; let frameRate = multiFrameSerie.frameTime; document.getElementById("frame-rate").innerText = "Frame Rate: " + parseInt(frameRate) + "ms"; document.getElementById("image-time").innerText = "Current Frame: 1 of " + numberOfFrames; animationId = setInterval(function () { let series = larvitar.getDataFromImageManager(seriesId); frameId = frameId == numberOfFrames - 1 ? 0 : frameId + 1; const element = document.getElementById("viewer"); const viewport = larvitar.cornerstone.getViewport(element); const viewportCopy = JSON.parse(JSON.stringify(viewport)); larvitar.renderImage(multiFrameSerie, "viewer", { cached: true, imageIndex: frameId, scale: viewport.scale, translation: viewport.translation }); document.getElementById("image-time").innerText = "Current Frame: " + parseInt(frameId + 1) + " of " + numberOfFrames; }, frameRate); const t2 = performance.now(); larvitar.logger.debug("Time to start cine loop: " + (t2 - t0) + "ms"); // add event listener to the wheel to update the UI document .getElementById("viewer") .addEventListener("wheel", function (event) { frameId = larvitar.store.get(["viewports", "viewer", "sliceId"]); document.getElementById("image-time").innerText = "Current Frame: " + parseInt(frameId + 1) + " of " + numberOfFrames; }); document.onkeypress = function (e) { e = e || window.event; if (e.keyCode == 109) { let performanceMonitor = larvitar.getPerformanceMonitor(); if (performanceMonitor) { larvitar.deactivatePerformanceMonitor(); } else { larvitar.activatePerformanceMonitor(); } } if (e.keyCode == 112) { animation = !animation; if (animation) { frameId = larvitar.store.get(["viewports", "viewer", "sliceId"]); animationId = setInterval(function () { let series = larvitar.getDataFromImageManager(seriesId); frameId = frameId == numberOfFrames - 1 ? 0 : frameId + 1; larvitar.renderImage(multiFrameSerie, "viewer", { cached: true, imageIndex: frameId, scale: viewport.scale, translation: viewport.translation }); document.getElementById("image-time").innerText = "Current Frame: " + parseInt(frameId + 1) + " of " + numberOfFrames; }, frameRate); } else { clearInterval(animationId); document.getElementById("image-time").innerText = ""; // Clear the text when animation stops } } }; } async function createFile(fileName, cb) { let response = await fetch("./demo/" + fileName); let data = await response.blob(); let file = new File([data], fileName); demoFiles.push(file); cb(); } createFile("xa_integris.dcm", renderSerie);
```

--------------------------------

### Install Dependencies

Source: https://github.com/dvisionlab/larvitar/blob/master/CONTRIBUTING.md

Command to install all project dependencies using Yarn.

```bash
yarn install
```

--------------------------------

### Adding an External Custom Tool

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/guide/examples.md

Demonstrates integrating an external custom tool into Larvitar. Covers setup, configuration, registration, and activation of custom tools to extend platform functionality.

```javascript
/*
  This is a placeholder for the JavaScript code related to adding an external custom tool.
  The actual implementation would involve Larvitar's API for tool registration and management.
  Refer to the example link for detailed code.
*/
// Example of registering a custom tool (conceptual)
// Larvitar.registerTool({
//   name: 'MyCustomTool',
//   path: '/path/to/custom/tool',
//   config: { ... }
// });
```

--------------------------------

### Larvitar Initialization and Image Rendering Example

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/reslice.html

This JavaScript code demonstrates the core functionality of the Larvitar library. It initializes image loading, registers reslicing capabilities, sets up cornerstone tools, and manages viewports. The example shows how to read files, populate the image manager, render axial images, cache images, perform coronal reslicing, and render the resliced images.

```javascript
const spinnerBase = document.getElementById("spinner-base");
const spinnerReslice = document.getElementById("spinner-reslice");

// Show spinner
function showSpinner(spinner) {
  spinner.style.display = "block";
}

// Hide spinner
function hideSpinner(spinner) {
  spinner.style.display = "none";
}

// init all
larvitar.initializeImageLoader();
larvitar.registerResliceLoader();
larvitar.initializeCSTools();
larvitar.store.initialize();
larvitar.store.addViewport("viewer-base");
larvitar.store.addViewport("viewer-reslice");

// set log level to debug
larvitar.setLogLevel("debug");

let demoFiles = [];
let counter = 0;

showSpinner(spinnerBase);
showSpinner(spinnerReslice);

const getDemoFileNames = function () {
  let demoFileList = [];
  for (let i = 1; i < 25; i++) {
    let filename = "anon" + i;
    demoFileList.push(filename);
  }
  return demoFileList;
};

async function createFile(fileName, cb) {
  let response = await fetch("./demo/" + fileName);
  let data = await response.blob();
  let file = new File([data], fileName);
  demoFiles.push(file);
  counter++;
  if (counter == 24) {
    cb();
  }
}

function renderSerie() {
  larvitar
    .readFiles(demoFiles)
    .then(seriesStack => {
      // render the first series of the study
      let seriesId = Object.keys(seriesStack)[0];
      let serie = seriesStack[seriesId];
      larvitar.populateImageManager(seriesId, serie);
      larvitar.renderImage(serie, "viewer-base").then(() => {
        hideSpinner(spinnerBase);
        larvitar.logger.debug("Image axial has been rendered");
        larvitar.addDefaultTools("viewer-base");
        larvitar.setToolActive("Wwwc");
      });
      larvitar.cacheImages(serie, function (resp) {
        if (resp.loading == 100) {
          larvitar.resliceSeries(serie, "coronal").then(data => {
            larvitar.renderImage(data, "viewer-reslice").then(() => {
              hideSpinner(spinnerReslice);
              larvitar.logger.debug("Image resliced has been rendered");
              larvitar.addDefaultTools("viewer-reslice");
              larvitar.setToolActive("Wwwc");
            });
          });
        }
      });
    })
    .catch(err => larvitar.logger.error(err));
}

let demoFileList = getDemoFileNames();
demoFileList.forEach(demoFile => {
  createFile(demoFile, renderSerie);
});
```

--------------------------------

### Create and Load Demo Files

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/segmentationTools.html

Asynchronously fetches demo files, converts them to File objects, and stores them. Triggers a callback when all files are processed.

```JavaScript
async function createFile(fileName, cb) {
  let response = await fetch("./demo/" + fileName);
  let data = await response.blob();
  let file = new File([data], fileName);
  demoFiles.push(file);
  counter++;
  if (counter == 24) {
    cb();
  }
}
```

--------------------------------

### Add Tool Example

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/api/modules/tools/initialization.md

Demonstrates how to add a tool with a specific name, custom configuration, and target HTML element ID.

```typescript
addTool(
  "ScaleOverlay",
  { configuration: { minorTickLength: 10, majorTickLength: 25 } },
  "viewer"
);
```

--------------------------------

### Install Larvitar using yarn

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/guide/installation.md

Add the Larvitar library to your project's dependencies using yarn. This is an alternative to npm for package management.

```bash
yarn add larvitar
```

--------------------------------

### Initialize and Activate Tools

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/api/modules/tools/initialization.md

Demonstrates the process of initializing the Cornerstone tools environment, adding a specific tool like 'Wwwc' for contrast adjustment, and activating it for user interaction.

```javascript
initializeCSTools(); // Prepares the default Cornerstone tools environment.
addTool("Wwwc"); // Adds the Window/Level tool for adjusting image contrast and brightness.
setToolActive("Wwwc"); // Activates the "Wwwc" tool, enabling interactive control for the user.
```

--------------------------------

### Larvitar Initialization and Image Loading

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/layers.html

Demonstrates the initialization of Larvitar components, including image loader, CS tools, and store. It also shows how to add a viewport, set the log level, and display a spinner during file processing.

```javascript
const spinner = document.getElementById("spinner"); // Show spinner function showSpinner() { spinner.style.display = "block"; } // Hide spinner function hideSpinner() { spinner.style.display = "none"; } let demoFiles = []; let counter = 0;

// init all
larvitar.initializeImageLoader();
larvitar.initializeCSTools();
larvitar.store.initialize();
larvitar.store.addViewport("viewer");

// set log level to debug
larvitar.setLogLevel("debug");
showSpinner();
```

--------------------------------

### DICOM PDF Rendering Setup (Cypress)

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/api/modules/tests/cypress.md

Tests the initial loading and setup of the pdf.html page for the Larvitar DICOM PDF viewer. It verifies viewer visibility, custom hook for loading completion, and spinner hiding.

```javascript
it("visits the pdf.html page and checks setup", () => {
  cy.visit("examples/pdf.html");
  cy.get("#viewer").should("be.visible");
  cy.window().then((win) => {
    win.allFilesLoaded = new Promise((resolve) => {
      // Custom hook to set a flag when DICOM PDF files are fully loaded
      setTimeout(resolve, 2000);
    });
    cy.wrap(win.allFilesLoaded).should('exist');
  });
  cy.get(".spinner").should("not.be.visible");
});
```

--------------------------------

### Larvitar Initialization and Image Rendering

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/colorMaps.html

Initializes Larvitar components, sets up a viewer, adds a custom color map, and renders the first series from a list of demo files. It also includes functionality to cycle through color maps using keyboard input.

```javascript
const script = document.createElement("script");
if (window.location.host === "larvitar.dvisionlab.com") {
    document.write( '<script src="https://larvitar.dvisionlab.com/assets/larvitar.js"><\/script>' );
} else {
    document.write('<script src="../../dist/larvitar.js"><\/script>');
}

document.head.appendChild(script);

document.addEventListener("DOMContentLoaded", () => {
    const showCodeBtn = document.getElementById("showCodeBtn");
    const codeSnippet = document.getElementById("codeSnippet");
    const copyCodeBtn = document.getElementById("copyCodeBtn");

    const code = ` larvitar.initializeImageLoader();
    larvitar.initializeCSTools();
    larvitar.store.initialize();
    larvitar.store.addViewport("viewer");

    const customColorMap = function () {
        let array = [[0, 0, 0, 255]]
        for (let i = 1; i < 255; i++) {
            let rgb;
            rgb = larvitar.HSVToRGB(i / 360, 1, 1);
            rgb[0] = Math.floor(rgb[0] * 255);
            rgb[1] = Math.floor(rgb[1] * 255);
            rgb[2] = Math.floor(rgb[2] * 255);
            rgb[3] = 255;
            array.push(rgb);
        }
        array.push([0, 0, 0, 255]);
        return array;
    };

    larvitar.addColorMap("custom", "CUSTOM", customColorMap());

    larvitar
        .readFiles(demoFiles)
        .then(seriesStack => {
            let seriesId = Object.keys(seriesStack)[0];
            let serie = seriesStack[seriesId];
            larvitar.renderImage(serie, "viewer").then(() => {
                larvitar.addDefaultTools("viewer");
                larvitar.setToolActive("Wwwc");
            });
        })
`;

    showCodeBtn.addEventListener("click", () => {
        codeSnippet.textContent = code;
        Prism.highlightElement(codeSnippet);
        const codeModal = new bootstrap.Modal(document.getElementById("codeModal"));
        codeModal.show();
    });

    copyCodeBtn.addEventListener("click", () => {
        navigator.clipboard.writeText(code);
    });
});

const spinner = document.getElementById("spinner");
function showSpinner() {
    spinner.style.display = "block";
}
function hideSpinner() {
    spinner.style.display = "none";
}

let demoFiles = [];
let counter = 0;

showSpinner();

const getDemoFileNames = function () {
    let demoFileList = [];
    for (let i = 1; i < 25; i++) {
        let filename = "anon" + i;
        demoFileList.push(filename);
    }
    return demoFileList;
};

const customColorMap = function () {
    let array = [[0, 0, 0, 255]]
    for (let i = 1; i < 255; i++) {
        let rgb;
        rgb = larvitar.HSVToRGB(i / 360, 1, 1);
        rgb[0] = Math.floor(rgb[0] * 255);
        rgb[1] = Math.floor(rgb[1] * 255);
        rgb[2] = Math.floor(rgb[2] * 255);
        rgb[3] = 255;
        array.push(rgb);
    }
    array.push([0, 0, 0, 255]);
    return array;
};

larvitar.initializeImageLoader();
larvitar.initializeCSTools();
larvitar.store.initialize();
larvitar.store.addViewport("viewer");
larvitar.setLogLevel("debug");
larvitar.addColorMap("custom", "CUSTOM", customColorMap());

async function createFile(fileName, cb) {
    let response = await fetch("./demo/" + fileName);
    let data = await response.blob();
    let file = new File([data], fileName);
    demoFiles.push(file);
    counter++;
    if (counter == 24) {
        cb();
    }
}

function renderSerie() {
    larvitar
        .readFiles(demoFiles)
        .then(seriesStack => {
            let seriesId = Object.keys(seriesStack)[0];
            let serie = seriesStack[seriesId];
            larvitar.renderImage(serie, "viewer").then(() => {
                hideSpinner();
                larvitar.logger.debug("Image has been rendered");
                larvitar.addDefaultTools("viewer");
                larvitar.setToolActive("Wwwc");
            });
        })
        .catch(err => larvitar.logger.error(err));
}

let demoFileList = getDemoFileNames();
demoFileList.forEach(demoFile => {
    createFile(demoFile, renderSerie);
});

let color_counter = 0;
document.onkeypress = function (e) {
    e = e || window.event;
    let color_maps = larvitar.getColormapsList();
    color_counter = color_counter == color_maps.length - 1 ? 0 : color_counter + 1;
    let color_map = color_maps[color_counter];
    if (e.keyCode === 109) {
        larvitar.applyColorMap(color_map.id);
        document.getElementById("active-color-map").innerHTML = "Active Color Map: " + color_map.name;
    }
};
```

--------------------------------

### Build for Production

Source: https://github.com/dvisionlab/larvitar/blob/master/CONTRIBUTING.md

Command to build the project for production deployment.

```bash
yarn run build
```

--------------------------------

### Larvitar Custom Tools Registration Example

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/api/modules/tools/default.md

Illustrates how to register and add a custom tool in Larvitar, including initialization, viewport setup, external tool registration, and activation.

```typescript
initializeCSTools();
store.addViewport("viewer");
registerExternalTool("customTool");
addTool("customTool"); //or directly use addDefaultTools();
setToolActive("customTool");
```

--------------------------------

### Multi-Image Toggle Functionality

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/watershedSegmentationTool.html

Toggles the multi-image mode in Larvitar and updates the UI accordingly. It changes the button text and controls the visibility of start and end image input fields.

```javascript
function triggerHandleToggle() {
  let isMultiImage = larvitar.DEFAULT_TOOLS["WSToggle"].configuration.multiImage === false ? true : false;
  larvitar.DEFAULT_TOOLS["WSToggle"].configuration.multiImage = isMultiImage;
  toggleButton.innerHTML = isMultiImage === true ? "Multi Image" : "Current Image";
  if (isMultiImage) {
    startInput.style.removeProperty("display");
    endInput.style.removeProperty("display");
  } else {
    startInput.style.display = "none";
    endInput.style.display = "none";
  }
}

const toggleButton = document.getElementById("toggleButton");
toggleButton.addEventListener("click", triggerHandleToggle);
```

--------------------------------

### Viewer Initial State (Multiframe) (Cypress)

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/api/modules/tests/cypress.md

Checks the initial state of the multiframe viewer, ensuring it starts with an initial frame and displays correct frame rate and current frame information.

```javascript
it("viewer starts with an initial frame", () => {
  cy.get(".frame-rate").should("be.visible");
  cy.get(".current-frame").should("be.visible");
});
```

--------------------------------

### Fork and Clone Repository

Source: https://github.com/dvisionlab/larvitar/blob/master/CONTRIBUTING.md

Steps to fork the Larvitar repository and clone it to your local machine.

```bash
git clone https://github.com/your-username/Larvitar.git
cd Larvitar
```

--------------------------------

### Comprehensive Toolset: Cornerstone Tools and Custom Tools

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/guide/examples.md

Demonstrates integrating and using Cornerstone Tools and custom tools in Larvitar. Covers standard tools for measurement, annotation, zoom, pan, scroll, and implementing custom tools for specific imaging requirements.

```html
### 3. Comprehensive Toolset: Cornerstone Tools and Custom Tools

This example demonstrates how to integrate and use the full range of **Cornerstone Tools** available in Larvitar, along with some custom tools developed specifically for enhanced functionality. This example is ideal for users looking to maximize interactivity and customization in medical imaging workflows, providing tools for measurement, annotation, and specialized interactions.

Key features covered in this example include:

- Setup and usage of standard Cornerstone tools such as length, angle, and area measurement, zoom, pan, and scroll
- Applying annotation and ROI (Region of Interest) tools for detailed image analysis
- Implementing custom tools tailored to specific imaging requirements, such as specialized interaction modes or unique visualization functions

[View Example ➔](https://larvitar.dvisionlab.com/examples/defaultTools.html)
```

--------------------------------

### Segmentation Mask Input Handling

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/watershedSegmentationTool.html

Handles input events for the masks number, start image index, and end image index. It updates the corresponding configuration values in Larvitar's tools.

```javascript
const masksNumberInput = document.getElementById("masksNumber");
masksNumberInput.addEventListener("input", function (event) {
  larvitar.DEFAULT_TOOLS["WSToggle"].configuration.masksNumber = event.target.value;
});

const startInput = document.getElementById("startImage");
startInput.addEventListener("input", function (event) {
  larvitar.DEFAULT_TOOLS["WSToggle"].configuration.startIndex = event.target.value;
});

const endInput = document.getElementById("endImage");
endInput.addEventListener("input", function (event) {
  larvitar.DEFAULT_TOOLS["WSToggle"].configuration.endIndex = event.target.value;
});
```

--------------------------------

### DSA Viewer Base Functionality and Visual Regression

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/api/modules/tests/cypress.md

Tests for the DSA viewer, including base HTML loading, visual regression setup using cypress-image-snapshot, DSA mask application, and frame animation control.

```javascript
cy.visit('/dsa.html');
cy.get('.viewer').should('be.visible');
cy.matchImageSnapshot('dsa-initial-state', {
  threshold: 0.1,
  thresholdType: 'pixel'
});
cy.get('.viewer').trigger('keydown', { key: '2' }); // Simulate mask application
cy.wait(1000); // Allow time for mask application
cy.matchImageSnapshot('dsa-mask-applied', {
  threshold: 0.1,
  thresholdType: 'pixel'
});
cy.get('.viewer').trigger('keydown', { key: 'p' }); // Simulate play/pause
```

--------------------------------

### Visualizing Grayscale Presentation States (GSPS)

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/guide/examples.md

Guides on using GSPS in Larvitar for enhanced medical image visualization, including LUT adjustments, spatial transformations, and annotations. Covers mapping instanceUIDs to PS and toggling the GspsTool.

```javascript
/*
  This is a placeholder for the JavaScript code related to GSPS visualization.
  The actual implementation would involve Larvitar's GSPS manager and tools.
  Refer to the example link for detailed code.
*/
// Example of initializing GspsTool (conceptual)
// const gspsManager = Larvitar.getGspsManager();
// gspsManager.addPresentationState('instance-uid-123', '/path/to/ps.json');
// const gspsTool = new Larvitar.GspsTool();
// gspsTool.enable();
```

--------------------------------

### Larvitar Default Tools Activation Example

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/api/modules/tools/default.md

Demonstrates the process of initializing Cornerstone.js tools, adding a viewport, activating default tools, and explicitly setting an active tool.

```typescript
store.addViewport("viewer");
initializeCSTools();
addDefaultTools("viewer");
setToolActive("Wwwc"); //explicitly set the active tool. If not, default active is StackScroll
```

--------------------------------

### Dynamic Script Loading and Larvitar Initialization

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/layers.html

This snippet dynamically loads the Larvitar JavaScript file based on the current host. It then initializes Larvitar's image loader, CSTools, and store, adding a viewer viewport. The code also demonstrates reading demo files, populating the Larvitar manager, building and rendering layers with different colormaps and opacity, caching images, and adding default tools.

```javascript
const script = document.createElement("script");
if (window.location.host === "larvitar.dvisionlab.com") {
    document.write( '<script src="https://larvitar.dvisionlab.com/assets/larvitar.js"><\/script>' );
} else {
    document.write('<script src="../../dist/larvitar.js"><\/script>');
}

document.head.appendChild(script);

document.addEventListener("DOMContentLoaded", () => {
    const showCodeBtn = document.getElementById("showCodeBtn");
    const codeSnippet = document.getElementById("codeSnippet");
    const copyCodeBtn = document.getElementById("copyCodeBtn");

    const code = `
larvitar.initializeImageLoader();
larvitar.initializeCSTools();
larvitar.store.initialize();
larvitar.store.addViewport("viewer");

larvitar
  .readFiles(demoFiles)
  .then(seriesStack => {
    let seriesId = Object.keys(seriesStack)[0];
    let serie_1 = { ...seriesStack[seriesId] };
    let serie_2 = { ...seriesStack[seriesId] };

    larvitar.populateLarvitarManager(seriesId, serie_1);
    larvitar.populateLarvitarManager(seriesId, serie_2);

    let manager = larvitar.getImageManager();
    layer_1 = larvitar.buildLayer(serie_1, "main");
    layer_2 = larvitar.buildLayer(serie_2, "colored", { opacity: 0.25, colormap: "hotIron" });

    serie_1.layer = layer_1;
    serie_2.layer = layer_2;

    larvitar.renderImage(serie_1, "viewer").then(() => {
      larvitar.cacheImages(serie_1, function (resp) {
        if (resp.loading == 100) {
          let cache = larvitar.cornerstone.imageCache;
          console.log(
            "Cache size: ",
            cache.getCacheInfo().cacheSizeInBytes / 1e6,
            "Mb"
          );
        }
      });
      larvitar.renderImage(serie_2, "viewer").then(() => {
        larvitar.cacheImages(serie_2, function (resp) {
          if (resp.loading == 100) {
            let cache = larvitar.cornerstone.imageCache;
            console.log(
              "Cache size: ",
              cache.getCacheInfo().cacheSizeInBytes / 1e6,
              "Mb"
            );
          }
        });
        larvitar.addDefaultTools("viewer");
      });
    });
  });
`;

    showCodeBtn.addEventListener("click", () => {
        codeSnippet.textContent = code;
        Prism.highlightElement(codeSnippet);
        const codeModal = new bootstrap.Modal(document.getElementById("codeModal"));
        codeModal.show();
    });

    copyCodeBtn.addEventListener("click", () => {
        navigator.clipboard.writeText(code);
    });
});

```

--------------------------------

### Larvitar Initialization and Image Loading

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/dsa.html

Demonstrates the initialization of Larvitar components, including image loaders for multi-frame and DSA images, and the initialization of the store and CSTools. It also shows how to add a viewport and set the log level.

```javascript
const spinner = document.getElementById("spinner"); // Show spinner function showSpinner() { spinner.style.display = "block"; } // Hide spinner function hideSpinner() { spinner.style.display = "none"; } // init all larvitar.initializeImageLoader(); larvitar.registerMultiFrameImageLoader(); larvitar.registerDsaImageLoader(); larvitar.initializeCSTools(); larvitar.store.initialize(); larvitar.store.addViewport("viewer"); // set log level to debug larvitar.setLogLevel("debug");
```

--------------------------------

### Dynamic Script Loading and Initialization

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/4d.html

This snippet dynamically loads the Larvitar.js script based on the current host. It then initializes image loading, CSTools, and the store. It also sets up a viewer, populates the image manager, renders an image, and adds default tools, including a custom mouse wheel scroll.

```javascript
const script = document.createElement("script");
if (window.location.host === "larvitar.dvisionlab.com") {
    document.write( '<script src="https://larvitar.dvisionlab.com/assets/larvitar.js"><\/script>' );
} else {
    document.write('<script src="../../dist/larvitar.js"><\/script>');
}

document.head.appendChild(script);

document.addEventListener("DOMContentLoaded", () => {
    const showCodeBtn = document.getElementById("showCodeBtn");
    const codeSnippet = document.getElementById("codeSnippet");
    const copyCodeBtn = document.getElementById("copyCodeBtn");
    const code = `
 larvitar.initializeImageLoader();
 larvitar.initializeCSTools();
 larvitar.store.initialize();
 larvitar.store.addViewport("viewer");

 larvitar
 .readFiles(fileList)
 .then(seriesStack => {
    const seriesId = Object.keys(seriesStack)[0];
    const serie = seriesStack[seriesId];
    larvitar.populateImageManager(seriesId, serie);
    larvitar.renderImage(serie, "viewer").then(() => {
        larvitar.addDefaultTools("viewer");
        larvitar.setToolActive("CustomMouseWheelScroll");
    });
 })
`;

    showCodeBtn.addEventListener("click", () => {
        codeSnippet.textContent = code;
        Prism.highlightElement(codeSnippet);
        const codeModal = new bootstrap.Modal(document.getElementById("codeModal"));
        codeModal.show();
    });

    copyCodeBtn.addEventListener("click", () => {
        navigator.clipboard.writeText(code);
    });
});
```

--------------------------------

### Install Larvitar Dependencies

Source: https://github.com/dvisionlab/larvitar/blob/master/README.md

Installs the necessary dependencies for developing or using the Larvitar library, including cornerstone-core, cornerstone-tools, and others.

```bash
yarn install
```

--------------------------------

### Larvitar Tool Definition Example

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/api/modules/tools/default.md

An example of a tool definition object for Larvitar, showcasing properties like name, viewports, configuration, options, class, and type.

```typescript
Zoom: {
    name: "Zoom",
    viewports: "all",
    configuration: {
      invert: false,
      preventZoomOutsideImage: false,
      minScale: 0.01,
      maxScale: 25.0
    },
    options: {
      mouseButtonMask: 2,
      supportedInteractionTypes: ["Mouse", "Touch"],
      defaultStrategy: "default" // can be 'default', 'translate' or 'zoomToCenter'
    },
    cleanable: false,
    class: "ZoomTool",
    defaultActive: true,
    description: "Zoom image at mouse position",
    shortcut: "ctrl-z",
    type: "utils"
  }
```

--------------------------------

### Initialize with Default and Custom Tools

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/api/modules/tools/initialization.md

Shows how to initialize the application with default tools, add a viewer, and activate a custom tool like 'WatershedSegmentation'. This includes loading default tools which can incorporate custom-defined tools.

```javascript
store.initialize();
addViewport("viewer");
initializeCSTools(); // Prepares the default Cornerstone tools environment.
addDefaultTools("viewer"); // Adds the default tools, which can also include custom-defined tools.
setToolActive("WatershedSegmentation"); // Activates the "WatershedSegmentation" custom tool for user interaction.
```

--------------------------------

### Larvitar Segmentation and Tool Initialization

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/examples/segmentationTools.html

Initializes Larvitar's image loader, CSTools, and store. It sets up a viewport, reads image files, renders the first series, and adds default tools. It also configures mouse event handlers for tools like Pan and Zoom, and demonstrates adding and activating a segmentation mask.

```javascript
larvitar.initializeImageLoader();
larvitar.initializeCSTools();
larvitar.store.initialize();
larvitar.store.addViewport("viewer");
larvitar.resetImageManager();

const seriesStack = await larvitar.readFiles(demoFiles);
let seriesId = Object.keys(seriesStack)[0];
let serie = seriesStack[seriesId];
await larvitar.renderImage(serie, "viewer");
larvitar.addDefaultTools("viewer");
loadMasks();
larvitar.populateImageManager(seriesId, serie);
await larvitar.loadAndCacheImageStack(serie);

setTimeout(function () {
    larvitar.setToolActive("Brush");
}, 1000);

let mouseConfig = {
    mouse_button_right: { ctrl: "Pan", default: "Zoom" },
    debug: true
};
larvitar.addMouseKeyHandlers(mouseConfig);

async function loadMasks() {
    let data = new Int16Array(768 * 768 * 24);
    let properties = {
        color: "#00ff00",
        opacity: 0.2,
        labelId: 0
    };
    await larvitar
        .addSegmentationMask(properties, data, "viewer")
        .then(() => {
            larvitar.setActiveLabelmap(0, "viewer");
        });
}
```

--------------------------------

### Custom Digital Subtraction Algorithm Implementation

Source: https://github.com/dvisionlab/larvitar/blob/master/docs/guide/examples.md

Provides an example of implementing a custom digital subtraction algorithm, commonly used in angiography. It covers loading, aligning, and processing mask and contrast-enhanced images.

```Python
from larvitar import Larvitar
import numpy as np

# Load mask and contrast images
mask_image = Larvitar(data_path='mask_image.nii.gz')
contrast_image = Larvitar(data_path='contrast_image.nii.gz')

# Ensure images are aligned and have the same dimensions
# Perform digital subtraction
def custom_dsa(mask, contrast):
    # Simple subtraction, can be customized further
    return contrast - mask

processed_data = custom_dsa(mask_image.get_data(), contrast_image.get_data())

# Visualize the result
viewer = Larvitar(data=processed_data)
viewer.show()
```