Html5 Demo Notes

The demo is a very early experimental version, to show the possibilities of how DicomObjects can be used to generate a totally zero-footprint viewer, with no plug-ins whatsoever.  There are several design principles:

These goals have been achieved by using a “WebControl”, which generates the basic browser, with use of DicomObjects (full .NET DLL)

Display Rendering method
DicomWebViewer (derived from WebControl) In C# “User” code behind (C#)
Toolkit javascriptto do rendering “User” javascriptto link buttons and mouse movements to functions

This approach allows the “user” code to operate by either:

  1. Using “Code behind” as is used in the querying and “reset” buttons, which completely regenerate the control via postbacks (with or without AJAX)
  2. Using javascript to manipulate the control and its data directly - as is shown with the “next”, “prev”, “1x1” and “2x2” buttons.

This is shown by the following workflow diagram:

  1. The code behind (VB.NET/C# etc.) sets the properties of the DicomWebControl, including loading images into its Images collections, setting MultiRows etc., just as would be done with a DicomViewer forms control
  2. When the page is rendered, the control emits html, including javascript to bootstrap the control.  At the same time, if this is the first rendering of the control, a new unique listening endpoint is created for use in subsequent operations
  3. Once the page is loaded, the control requests details of the images it is to display (but no pixel data at this stage, only size, arrangement, identifiers etc.  The control then creates its own HTML for displaying the images, using either HTML5 canvas elements or older IMG elements, according to browser and image type, or preferences set by the code behind.
  4. If the image is being displayed via the canvas element, then pixel data is requested through the listening endpoint - this may be downsampled according the required zoom level.  It is then windowed and rendered within the browser.
  5. If the image is being displayed via and IMG link, then a suitable URL is generated (including zoom, pan, window information etc.) and the image is requested through the listening endpoint.
  6. User javascript may modify the display in the browser, causing D and/or E to be repeated as necessary, though the pixel data used for local rendering is of course cached, and only re-requested if the resolution required changes.
  7. The developer has full access to standard ASP.NET controls and their associated code behind.  This is how the server querying is achieved in the sample.

Other features of note:

On a desktop browser, the mouse controls are:

On a touch-screen (e.g. iPad) the touch controls are:

At this stage, there are clearly more features to be added, including:

These may be added in the future

If you wish to ask any questions, please do get in touch to

YOu may download the Source Code and demo project from here