Skip to content
chafey edited this page Mar 23, 2014 · 15 revisions

In cornerstone, an enabled element is an HTML DOM node (typically a DIV) which cornerstone displays an interactive medical image inside of. To display an image, a web developer needs to do the following:

  1. Include the cornerstore javascript file in the web page
  2. Add an element to the DOM that he wishes to display interactive medical images in
  3. Use CSS to position the element on the page along with the desired width and height
  4. Instruct cornerstone to display an interactive image in the element for an ImageId ImageId. This can be done with javascript via the enable api call or via markup embedded in the HTML

Building on this, a web developer could optionally do the following:

  1. Specify Viewport parameters such as window width/window center, zoom and pan
  2. Listen for the CornerstoneImageRendered eventso it can draw on the image (e.g. annotations)
  3. Add any of the tools included with CornerStone to make the image interactive (e.g. pan, zoom, measure)
  4. Listen to the CornerstoneViewportUpdated eventevent so it can be aware of changes to the images Viewport properties
  5. Implement a custom tool that integrates tightly with the image
  6. Implement a custom ImageLoader that can retrieve images from a web server