V22 Update – Tutorials for Medical Web Viewer Control

Have you downloaded the latest evaluation of LEADTOOLS yet? There is no better time than now, as we recently introduced a lot of exciting new features in our update to LEADTOOLS V22!

In a previous post, we took a deep-dive into the NEW LEADTOOLS eSignature technology that is ready to use within our Document Viewer. Today we’re going to spotlight some important additions to our Medical toolkit including new methods for loading DICOM files to the Medical Web Viewer control that use inputs defined by the DICOM Specification. The Control properties, Pixel Data and JSON, as well as the events, Load Metadata and Load Instance, connect the front and back-end of the application using the WADO (Web Access to DICOM Object) standard.

We also have two new tutorials that show how to set up the LEADTOOLS DicomWeb WADO service to retrieve and display DICOM images stored in a LEADTOOLS PACS database. The stored DICOM files are returned as a JSON response to parse in a HTML/JavaScript front-end application.

DicomWeb WADO Service

LEADTOOLS libraries provide extensive support for DICOM WADO, including WADO-URI, WADO-WS, and DICOMweb (RESTful DICOM Services). DICOMweb and WADO services are solutions to problems such as:

Configure and Run the LEADTOOLS DicomWeb WADO Service

The code snippets below show how to configure and set the licenses to be able to run the LEADTOOLS DicomWeb Wado Service. Be sure to check out the full tutorial for more information!

Open local.config inside <Install_DIR>\LEADTOOLS22\Examples\Medical\JS\WADODemo\Medical.WADO\WadoService

<add key="globalConfigPath" value="<FILE_PATH_TO_YOUR_LICENSE.LIC_FILE_HERE"/>

Add the contents of your developer KEY file as the value for lt.License.DeveloperKey

<add key="lt.License.DeveloperKey" value="<YOUR_DEVELOPER_KEY_HERE"/>

Set the value of globalConfigPath to the location of your GlobalPacs.config file which by default is located here:<Install_DIR>\LEADTOOLS22\Bin\DotNet4\x64\GlobalPacs.config

<add key="globalConfigPath" value="C:\LEADTOOLS22\Bin\DontNet4\x64\GlobalPacs.config"/>;

Retrieve and Display Images

Once the LEADTOOLS DicomWeb WADO service has been configured, you can then retrieve and display DICOM web files stored in a PACS/SQL database. The stored DICOM files are returned as a JSON response to parse in an HTML/JavaScript front-end application The full tutorial provides all the code needed to display the LEADTOOLS Medical Viewer as well as the JavaScript queries to the DicomWeb Wado Service. The snippets below show just how easy it is to setup the image viewer and also make the call to get metadata.

function initViewer() { 
  // Get the parent DIV 
  let imageViewerDiv = document.getElementById("viewer-control"); 
 
  // Create the medical viewer control, and specify the number of rows and columns. 
  viewer = new lt.Controls.Medical.MedicalViewer(imageViewerDiv, 1, 1); 
 
  viewer.enableLazyLoad = true; //enable lazy loading 
  viewer.marginFramesCount = 5; 
 
  // Add callbacks 
  viewer.loadMetadata.add(async (sender, args) => { 
    args.frame.JSON = await retrieveInstanceMetadata( 
      args.studyInstanceUID, 
      args.seriesInstanceUID, 
      args.sopInstanceUID 
    ); 
  }); 
 
  viewer.loadInstance.add(async (sender, args) => { 
    args.frame.pixelData = await retrieveFrameData( 
      args.studyInstanceUID, 
      args.seriesInstanceUID, 
      args.sopInstanceUID, 
      0 
    ); 
  }); 
} 

const retrieveSeriesMetadata = async (studyUID, seriesUID) => { 
  const url = `${dicomWeb_url}/wado-rs/studies/${studyUID}/series/${seriesUID}/metadata`; 
  const response = await fetch(url, headerOptions); 
  const data = await response.json(); 
 
  return data; 
}; 
 
const retrieveInstanceMetadata = async (studyUID, seriesUID, instanceUID) => { 
  const url = `${dicomWeb_url}/wado-rs/studies/${studyUID}/series/${seriesUID}/instances/${instanceUID}/metadata`; 
  const response = await fetch(url, headerOptions); 
  const data = await response.json(); 
 
  return data?.[0]; 
}; 

Download our Free Evaluation SDK

Download the latest version of LEADTOOLS and see these new features in action. LEADTOOLS comes with a FREE 60-day evaluation that gives you access to all our demos and free technical support.

Schedule a demo with our support team, consult with a sales specialist, or use our product wizard and pricing tools to configure an estimate for your specific application needs.

About Zac Ferraresi