0.3.0 • Published 4 years ago

@fintellab/ostrich v0.3.0

Weekly downloads
-
License
ISC
Repository
github
Last release
4 years ago

ostrich

ostrich is a volumetric imaging library for the web.

Quickstart

  1. Install package dependencies with npm:

     $ npm install
  2. Start development environment that keeps dist/main.js updated:

     $ npm run serve-example
  3. Open example/example.html in a web-browser.

API

ostrich is always initialized on an existing <canvas>-element:

<canvas id="my-canvas-element"></canvas>

<script src="dist/main.js"></script>
<script>
   
   const canvasElement = document.getElementById('my-canvas-element');
   const imageData = new ostrich.OstrichImageData(/*...*/);
   
   ostrich.initializeElement(canvasElement, imageData);
</script>

ostrich.OstrichImageData

Image data to be rendered has to be passed as an instance of ostrich.OstrichImageData to ostrich.initializeElement:

// image data is passed by a Int16Array containing the actual data accompinied by dimensionality information as a three-valued array
const dimensions = [10, 600, 800]; // depth, height, width
const data = new Int16Array(dimensions[0] * dimensions[1] * dimensions[2]);

const imageData = new ostrich.OstrichImageData(data, dimensions);

Methods

MethodDescription
ostrich.changeTransform(canvasElement: HTMLCanvasElement, scale: ?number, translateX: ?number, translateY: ?number, render: boolean)Changes the viewport transform.
ostrich.changeVoiWindow(canvasElement: HTMLCanvasElement, windowCenter: number, windowWidth: number, render: boolean)Changes the Value Of Interest (VOI) window.
ostrich.initializeElement(canvasElement: HTMLCanvasElement, imageData: ostrich.OstrichImageData)Initializes ostrich on the given canvas element.
ostrich.jumpToSlice(canvasElement: HTMLCanvasElement, slice: number, render: boolean)Switches to the given slice number.

Events

The following events are dispatched on an initialized <canvas>-element:

EventDescriptionEvent Details
ostrich.initializedImage has been initialized.-
ostrich.renderedImage has been rendered after some change.-
ostrich.sliceChangedSlice has been changed.{ from: number, to: number }
ostrich.toolActivatedTool has been activated.{ tool: Tool }
ostrich.toolDeactivatedTool has been deactivated.{ tool: Tool }
ostrich.voiWindowChangedVOI window has been changed.{ newWindowCenter: number, newWindowWidth: number }
ostrich.transformChangedVOI window has been changed.{ scale: number, translateX: number, translateY: number }

Tools

In addition to the general API, ostrich comes with several tools to interact with a loaded image. All tools have to be activated on an initialized image, e.g.:

const canvasElement = document.getElementById('my-canvas-element');
const imageData = new ostrich.OstrichImageData(/*...*/);

ostrich.initializeElement(canvasElement, imageData);
ostrich.activateTool(canvasElement, new ostrich.SliceScrollingTool());

All tools

Tool ClassDescription
ostrich.CursorInfoToolDisplays information for the current cursor position.
ostrich.PanDraggingToolViewport panning by dragging mouse-button.
ostrich.SliceScrollingToolAllows to scroll through image slices with the mouse wheel.
ostrich.VoiWindowDraggingToolChanges VOI windowing by left-click-dragging.
ostrich.ZoomDraggingToolChanges viewport scale by dragging mouse-button.
0.3.0

4 years ago

0.2.0

4 years ago

0.1.0

4 years ago