enabled element

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. Reference the cornerstore javascript library file via a script tag in a web page
2. Reference the javascript file for one or more image loaders that cornerstone will use to actually load the pixel data (e.g. WADO, WADO-RS, custom) in the web page
3. Add an element to the DOM that will be used to display the image inside of
4. Use CSS to position the element on the page along with the desired width and height
5. Call the enable() api to prepare the element to display images
6. Load an image using the loadImage() api
7. Display the loaded image using the displayImage() api

See the minimal example for the minimum code required to use cornerstone. Building on this, a web developer could optionally do the following:

1. Specify Viewport parameters such as window width/window center, zoom and pan. The viewport can be specified when calling the displayImage() api or at a later time by calling setViewport api call
2. Listen for the CornerstoneImageRendered eventso it can draw on the image (e.g. annotations)
3. Listen to the CornerstoneViewportUpdated eventevent so it can be aware of changes to the images Viewport properties
4. Implement a custom ImageLoader that can retrieve images stored in a non standard container or via a non standard protocol
5. Call resize() to notify cornerstone when the DOM element's size changes

You may also want to include the Cornerstone Tools Library for ready to go tools such as ww/wc, pan, zoom and measurements.