Request3DDataEventArgs Constructor

Request3DDataEventArgs = function( 
   Json, 
   type 
) 

constructor( 
   Json: string, 
   type: Requested3DDataType 
); 

 
import { MedicalViewer_MultiFrame_Example } from "../MedicalViewer_MultiFrame_Example"; 
 
export class PanoramicPolygon_Example { 
    constructor() { 
        this.run = (medicalViewer, authenticationCode) => { 
            this.medicalViewer = medicalViewer; 
            // we are going to get the cell that contains the polygon in order to generate the panoramic cell. 
            var cell = this.medicalViewer.layout.items.get_item(0); 
            var _frame = cell.frames.get_item(cell.currentOffset); 
            var _polygon; 
            // enable the action that will allow the user to draw a panoramic polygon. 
            var action = new lt.Controls.Medical.PanoramicAction(cell); 
            // the panoramic polygon has been created, now we will generate the 3d data in order to generate teh panoramic polygon. 
            action.panoramicGenerated.add((sender, e) => { 
                var panoramicCell; 
                var threed = "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp/api/threed/"; 
                // create a panoramic cell. 
                panoramicCell = new lt.Controls.Medical.PanoramicCell(medicalViewer, cell.divID + "_Panoramic"); 
                medicalViewer.layout.items.add(panoramicCell); 
                panoramicCell.URI = threed + "/GetPanoramicImage?auth=" + authenticationCode; 
                var engine3D = new lt.Controls.Medical.Object3DEngine(cell.divID + "_3D_Volume"); 
                var _polygon = sender; 
                engine3D.add_request3DData(function (sender, args) { 
                    switch (args.type) { 
                        case lt.Controls.Medical.Requested3DDataType.creationProgress: 
                            { 
                                var request3DDataPost = new XMLHttpRequest(); 
                                request3DDataPost.onreadystatechange = function (data) { 
                                    if (this.readyState == 4 && this.status == 200) { 
                                        var percent = parseInt(JSON.parse(this.responseText)); 
                                        if (engine3D.progress != 100) 
                                            engine3D.progress = percent; 
                                    } 
                                }; 
                                request3DDataPost.open("POST", threed + "CheckProgress", true); 
                                request3DDataPost.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
                                var progressSettings = { 
                                    authenticationCookie: authenticationCode, 
                                    id: engine3D.id 
                                }; 
                                request3DDataPost.send(JSON.stringify(progressSettings)); 
                            } 
                            break; 
                        case lt.Controls.Medical.Requested3DDataType.create3DObject: 
                            { 
                                var request3DDataPost = new XMLHttpRequest(); 
                                ; 
                                request3DDataPost.open("POST", threed + "Create3DObject", true); 
                                request3DDataPost.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
                                var seriesInstanceUID = "1.3.12.2.1107.5.1.4.50772.30000009122208215356200001997"; 
                                var create3DOptions = { 
                                    authenticationCookie: authenticationCode, 
                                    options: { PatientsOptions: {}, SeriesOptions: { SeriesInstanceUID: seriesInstanceUID }, StudiesOptions: {} }, 
                                    id: engine3D.id, 
                                    renderingType: 0, 
                                    extraOptions: { UserData2: "1.3.12.2.1107.5.1.4.50772.30000009122208215356200002253" } 
                                }; 
                                request3DDataPost.send(JSON.stringify(create3DOptions)); 
                            } 
                            break; 
                        case lt.Controls.Medical.Requested3DDataType.delete3DObject: 
                            { 
                                var request3DDataPost = new XMLHttpRequest(); 
                                request3DDataPost.onreadystatechange = function (data) { 
                                }; 
                                request3DDataPost.open("POST", threed + "End3DObject", true); 
                                request3DDataPost.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
                                var endObjectSettings = { 
                                    authenticationCookie: authenticationCode, 
                                    id: engine3D.id 
                                }; 
                                request3DDataPost.send(JSON.stringify(endObjectSettings)); 
                            } 
                            break; 
                    } 
                }); 
                engine3D.add_statusChanged(function (sender, args) { 
                    switch (args.status) { 
                        case lt.Controls.Medical.Object3DStatus.ready: 
                            if (panoramicCell.engine.progress == 100) { 
                                panoramicCell.seriesInstanceUID = cell.seriesInstanceUID; 
                                panoramicCell.studyInstanceUID = cell.studyInstanceUID + "_Panoramic"; 
                                var info = _frame.information.clone(); 
                                var frame = panoramicCell.frames.get_item(0); 
                                frame.set_information(info); 
                                panoramicCell.polygon = _polygon; 
                            } 
                            break; 
                    } 
                }); 
                engine3D.start("", cell.studyInstanceUID, cell.seriesInstanceUID); 
                panoramicCell.engine = engine3D; 
                setTimeout(function () { 
                    engine3D.end(); 
                    alert('this demo has a timer that will dispose the 3D object in 30 seconds, the time has lapsed... changed the timeout to make the 3D stay longer.'); 
                }, 30000); 
            }); 
            cell.setCommand(0, action); 
            cell.runCommand(0); 
        }; 
        this.viewerExample = new MedicalViewer_MultiFrame_Example(this.run); 
    } 
} 

SWITCHTOGENERIC:MedicalViewer_MultiFrame_Example.js 
export class MedicalViewer_MultiFrame_Example { 
       constructor(callback) { 
        // LEADTOOLS ImageViewer to be used with this example 
        this.medicalViewer = null; 
        // Generic state value used by the examples 
        this.timesClicked = 0; 
        this.authenticationCode = ""; 
        // Set the LEADTOOLS license. Replace this with your actual license file 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
        // Create an image viewer inside the imageViewerDiv element 
        const imageViewerDiv = document.getElementById("imageViewerDiv"); 
        const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
        this.medicalViewer = new lt.Controls.Medical.MedicalViewer(imageViewerDiv, 2, 2); 
        this.medicalViewer.onSizeChanged(); 
        var cell = new lt.Controls.Medical.Cell(this.medicalViewer, null, 1, 1); 
        // Set the show border to "true", to show a border around the cell.  
        cell.set_showFrameBorder(true); 
        // Add the cell to the viewer.   
        this.medicalViewer.layout.get_items().add(cell); 
        // [optional] Select the cell (it can also be selected by clicking on it.)  
        cell.set_selected(true); 
        cell.fullDownload = false; 
        cell.marginFramesCount = 3; 
        var self = this; 
        // we are now going to to download an image from LEADTOOLS medical viewer demo web site, you need to change this to download images from your database.  
        var xhttp = new XMLHttpRequest(); 
        xhttp.onreadystatechange = function (data) { 
            if (this.readyState == 4 && this.status == 200) { 
                // here we got the authentication Code that we need to retrieve the images from LEADTOOLS database.  
                self.authenticationCode = this.responseText; 
                var encodedAuthenticationCode = encodeURIComponent(self.authenticationCode); 
                // we get here the object retrieve address that points to a service that retrieves the information and the images from the server. 
                var objectRetrieveAddress = "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp/api/retrieve"; 
                var studyInstanceUID = "1.3.12.2.1107.5.1.4.50772.30000009122208074910900000022"; 
                // this is the series instance UID that contains all the frames that will be retrieved. 
                var seriesInstanceUID = "1.3.12.2.1107.5.1.4.50772.30000009122208215356200001997"; 
                cell.seriesInstanceUID = seriesInstanceUID; 
                cell.studyInstanceUID = studyInstanceUID; 
                // we are generating the address for retrieving the stack data. 
                var getStackAddress = objectRetrieveAddress; 
                getStackAddress += "/GetSeriesStacks?auth="; 
                getStackAddress += encodedAuthenticationCode; 
                getStackAddress += "&seriesinstanceUID=" + seriesInstanceUID; 
                var getStackRequest = new XMLHttpRequest(); 
                getStackRequest.onreadystatechange = function (data) { 
                    if (this.readyState == 4 && this.status == 200) { 
                        var json = JSON.parse(this.responseText)[0]; 
                        var instanceIndex = 0; 
                        var instanceCount = json.SopInstanceUIDs.length; 
                        // add frames based on the size of the number of instances. 
                        for (instanceIndex = 0; instanceIndex < instanceCount; instanceIndex++) { 
                            var cellFrame = new lt.Controls.Medical.Frame(cell); 
                            cell.get_frames().add(cellFrame); 
                        } 
                        // loop through every frame, and prepare the data. 
                        for (instanceIndex = 0; instanceIndex < instanceCount; instanceIndex++) { 
                            cellFrame = cell.get_frames().get_item(instanceIndex); 
                            // now, this is the MRTI info that contains the image information, width, height, tiles....etc.  
                            var mrtiInfo = new lt.Controls.Medical.MRTIImage(); 
                            // The image dpi.  
                            mrtiInfo.fullDpi = lt.LeadSizeD.create(150, 150); 
                            // the tile size, recommended value is 256  
                            mrtiInfo.tileSize = lt.LeadSizeD.create(512, 512); 
                            mrtiInfo.frameIndex = 0; 
                            // does this image support window level.  
                            mrtiInfo.supportWindowLevel = true; 
                            // different resolution for the image.  
                            var resolutions = [{ "width": 512, "height": 512 }, { "width": 256, "height": 256 }, { "width": 128, "height": 128 }, { "width": 64, "height": 64 }]; 
                            mrtiInfo.resolutions = []; 
                            for (var i = 0; i < resolutions.length; i++) { 
                                mrtiInfo.resolutions[i] = lt.LeadSizeD.create(resolutions[i].width, resolutions[i].height); 
                            } 
                            // the image width and height.  
                            cellFrame.set_width(mrtiInfo.resolutions[0].width); 
                            cellFrame.set_height(mrtiInfo.resolutions[0].height); 
                            // the image full size.  
                            mrtiInfo.fullSize = lt.LeadSizeD.create(cellFrame.get_width(), cellFrame.get_height()); 
                            // now we need the image URL,  
                            var imageUri = objectRetrieveAddress; 
                            imageUri += "/GetImageTile?auth="; 
                            imageUri += encodedAuthenticationCode; 
                            // this the image instance UID, change this if you want to retrieve anything else.  
                            imageUri += "&instance=" + json.SopInstanceUIDs[instanceIndex]; 
                            mrtiInfo.imageUri = imageUri; 
                            // set this info to the cell frame.  
                            cellFrame.mrtiInfo = mrtiInfo; 
                            // now we need to set the information for the image so we can do window level.  
                            var imageInfo = new lt.Controls.Medical.DICOMImageInformation(); 
                            // set the image width and height.  
                            imageInfo.width = 512; 
                            imageInfo.height = 512; 
                            // bits per pixel for the image  
                            imageInfo.bitsPerPixel = 16; 
                            // low and high bit.  
                            imageInfo.lowBit = 0; 
                            imageInfo.highBit = 11; 
                            // other information, setting some of them to zero means that the toolkit will try and calculate it by itself, but you can always get those values from the DicomDataSet.  
                            imageInfo.modalityIntercept = -1024; 
                            imageInfo.modalitySlope = 1; 
                            imageInfo.minValue = 0; 
                            imageInfo.maxValue = 0; 
                            imageInfo.windowWidth = 200; 
                            imageInfo.windowCenter = 40; 
                            imageInfo.signed = false; 
                            imageInfo.photometricInterpretation = 'MONOCHROME2'; 
                            imageInfo.firstStoredPixelValueMapped = 0; 
                            // set these information to the frame.  
                            cellFrame.set_information(imageInfo); 
                        } 
                        // scroll to the middle of the series. 
                        cell.currentOffset = instanceCount >> 1; 
                    } 
                }; 
                getStackRequest.open("GET", getStackAddress, true); 
                getStackRequest.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
                // we log in as a 'guest', after calling the below line, we will receive the authentication code sent via 'onreadystatechange' above.  
                getStackRequest.send(); 
            } 
        }; 
        // We are trying here to get an image from the LEADTOOLS database, we need to login and get the authentication code.  
        xhttp.open("POST", "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp/api/auth/AuthenticateUser", true); 
        xhttp.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
        // we log in as a 'guest', after calling the below line, we will receive the authentication code sent via 'onreadystatechange' above.  
        xhttp.send(JSON.stringify({ userName: 'guest', password: 'guest', userData: '' })); 
        const exampleButton = document.getElementById("exampleButton"); 
        exampleButton.addEventListener("click", () => { 
            this.timesClicked++; 
            // Run the example 
            if (callback) 
                callback(this.medicalViewer, this.authenticationCode); 
        }); 
    } 
} 

SWITCHTOGENERIC:PanoramicPolygon.ts 
import { MedicalViewer_MultiFrame_Example } from "../MedicalViewer_MultiFrame_Example"; 
 
 
export class PanoramicPolygon_Example { 
   private viewerExample; 
   private medicalViewer; 
   constructor() { 
      this.viewerExample = new MedicalViewer_MultiFrame_Example(this.run); 
   } 
 
   private run = (medicalViewer: lt.Controls.Medical.MedicalViewer, authenticationCode: string) => { 
      this.medicalViewer = medicalViewer; 
 
      // we are going to get the cell that contains the polygon in order to generate the panoramic cell. 
      var cell: lt.Controls.Medical.Cell = this.medicalViewer.layout.items.get_item(0); 
      var _frame : lt.Controls.Medical.Frame = cell.frames.get_item(cell.currentOffset); 
      var _polygon : lt.Controls.Medical.PanoramicPolygon; 
 
 
      // enable the action that will allow the user to draw a panoramic polygon. 
      var action: lt.Controls.Medical.PanoramicAction = new lt.Controls.Medical.PanoramicAction(cell); 
 
      // the panoramic polygon has been created, now we will generate the 3d data in order to generate the panoramic polygon. 
      action.panoramicGenerated.add((sender, e: lt.Controls.Medical.PanoramicChangedEventArgs) => { 
         var panoramicCell: lt.Controls.Medical.PanoramicCell; 
 
         var threed = "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp/api/threed/"; 
 
         // create a panoramic cell. 
         panoramicCell = new lt.Controls.Medical.PanoramicCell(medicalViewer, cell.divID + "_Panoramic"); 
         medicalViewer.layout.items.add(panoramicCell); 
 
         panoramicCell.URI = threed + "/GetPanoramicImage?auth=" + authenticationCode;  
 
         var engine3D: lt.Controls.Medical.Object3DEngine = new lt.Controls.Medical.Object3DEngine(cell.divID + "_3D_Volume"); 
 
         var _polygon = sender; 
 
         engine3D.add_request3DData(function (sender, args: lt.Controls.Medical.Request3DDataEventArgs) { 
 
            switch (args.type) { 
               case lt.Controls.Medical.Requested3DDataType.creationProgress: 
                  { 
                  var request3DDataPost = new XMLHttpRequest(); 
                     request3DDataPost.onreadystatechange = function (data) { 
                        if (this.readyState == 4 && this.status == 200) { 
                           var percent = parseInt(JSON.parse(this.responseText)); 
                           if (engine3D.progress != 100) 
                              engine3D.progress = percent; 
                        } 
                     }; 
                      
                     request3DDataPost.open("POST", threed + "CheckProgress", true); 
                     request3DDataPost.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
 
                     var progressSettings  =  
                     { 
                        authenticationCookie: authenticationCode, 
                        id: engine3D.id 
                     } 
 
                    request3DDataPost.send(JSON.stringify(progressSettings)); 
                  } 
                  break; 
 
               case lt.Controls.Medical.Requested3DDataType.create3DObject: 
                  { 
                     var request3DDataPost = new XMLHttpRequest();; 
                     request3DDataPost.open("POST", threed + "Create3DObject", true); 
                     request3DDataPost.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
 
                     var seriesInstanceUID = "1.3.12.2.1107.5.1.4.50772.30000009122208215356200001997" 
 
                     var create3DOptions = { 
                        authenticationCookie: authenticationCode, 
                        options: {PatientsOptions: {}, SeriesOptions: { SeriesInstanceUID: seriesInstanceUID }, StudiesOptions: {}}, 
                        id: engine3D.id, 
                        renderingType: 0, 
                        extraOptions: { UserData2: "1.3.12.2.1107.5.1.4.50772.30000009122208215356200002253" } 
                    }; 
 
                     request3DDataPost.send(JSON.stringify(create3DOptions)); 
                  } 
                  break; 
 
 
                  case lt.Controls.Medical.Requested3DDataType.delete3DObject: 
                     { 
                     var request3DDataPost = new XMLHttpRequest(); 
                     request3DDataPost.onreadystatechange = function (data) { 
                     }; 
                      
                     request3DDataPost.open("POST", threed + "End3DObject", true); 
                     request3DDataPost.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
 
                     var endObjectSettings  =  
                     { 
                        authenticationCookie: authenticationCode, 
                        id: engine3D.id 
                     } 
 
                    request3DDataPost.send(JSON.stringify(endObjectSettings)); 
                  } 
                     break; 
 
 
            } 
 
         }); 
 
         engine3D.add_statusChanged(function (sender, args: lt.Controls.Medical.StatusChangedEventArgs) { 
 
            switch (args.status) 
            { 
               case lt.Controls.Medical.Object3DStatus.ready: 
                  if (panoramicCell.engine.progress == 100) { 
 
                     panoramicCell.seriesInstanceUID = cell.seriesInstanceUID; 
                     panoramicCell.studyInstanceUID = cell.studyInstanceUID + "_Panoramic"; 
 
                     var info = _frame.information.clone(); 
                     var frame: lt.Controls.Medical.Frame = panoramicCell.frames.get_item(0); 
 
                     frame.set_information(info);                      
 
                     panoramicCell.polygon = _polygon; 
                  } 
                  break; 
            } 
 
         }); 
 
         engine3D.start("", cell.studyInstanceUID, cell.seriesInstanceUID); 
 
         panoramicCell.engine = engine3D; 
 
         setTimeout(function() 
         { 
            engine3D.end(); 
            alert('this demo has a timer that will dispose the 3D object in 30 seconds, the time has lapsed... changed the timeout to make the 3D stay longer.') 
         }, 
          
         30000); 
 
 
      }); 
 
 
      cell.setCommand(0, action); 
      cell.runCommand(0); 
   } 
} 

SWITCHTOGENERIC:MedicalViewer_MultiFrame_Example.ts 
export class MedicalViewer_MultiFrame_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   protected medicalViewer: lt.Controls.Medical.MedicalViewer = null; 
   // Generic state value used by the examples 
   public timesClicked: number = 0; 
   public authenticationCode : string = ""; 
 
   constructor(callback?: (medicalViewer: lt.Controls.Medical.MedicalViewer , authenticationCode : string) => void) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv : HTMLDivElement = <HTMLDivElement>document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
 
 
 
      this.medicalViewer = new lt.Controls.Medical.MedicalViewer(imageViewerDiv, 2, 2); 
      this.medicalViewer.onSizeChanged(); 
 
      var cell = new lt.Controls.Medical.Cell(this.medicalViewer, null, 1, 1);  
  
      // Set the show border to "true", to show a border around the cell.  
      cell.set_showFrameBorder(true);  
    
      // Add the cell to the viewer.   
      this.medicalViewer.layout.get_items().add(cell);  
    
      // [optional] Select the cell (it can also be selected by clicking on it.)  
      cell.set_selected(true);  
 
      cell.fullDownload = false; 
      cell.marginFramesCount = 3; 
    
      var self = this; 
 
      // we are now going to to download an image from LEADTOOLS medical viewer demo web site, you need to change this to download images from your database.  
      var xhttp = new XMLHttpRequest();  
      xhttp.onreadystatechange = function(data)  
      {  
        if (this.readyState == 4 && this.status == 200)  
        {  
           // here we got the authentication Code that we need to retrieve the images from LEADTOOLS database.  
            
           self.authenticationCode = this.responseText;  
           var encodedAuthenticationCode  = encodeURIComponent(self.authenticationCode);  
 
           // we get here the object retrieve address that points to a service that retrieves the information and the images from the server. 
           var objectRetrieveAddress =  "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp/api/retrieve"; 
 
           var studyInstanceUID  = "1.3.12.2.1107.5.1.4.50772.30000009122208074910900000022"; 
           // this is the series instance UID that contains all the frames that will be retrieved. 
           var seriesInstanceUID = "1.3.12.2.1107.5.1.4.50772.30000009122208215356200001997" 
 
           cell.seriesInstanceUID = seriesInstanceUID; 
           cell.studyInstanceUID = studyInstanceUID; 
 
           // we are generating the address for retrieving the stack data. 
           var getStackAddress = objectRetrieveAddress; 
           getStackAddress += "/GetSeriesStacks?auth="; 
           getStackAddress += encodedAuthenticationCode; 
           getStackAddress += "&seriesinstanceUID=" + seriesInstanceUID; 
 
           var getStackRequest  = new XMLHttpRequest();  
           getStackRequest.onreadystatechange = function (data) { 
              if (this.readyState == 4 && this.status == 200) { 
                 var json = JSON.parse(this.responseText)[0]; 
 
                 var instanceIndex = 0; 
                 var instanceCount = json.SopInstanceUIDs.length; 
 
                 // add frames based on the size of the number of instances. 
                 for (instanceIndex = 0; instanceIndex < instanceCount; instanceIndex++) { 
                  var cellFrame = new lt.Controls.Medical.Frame(cell);  
                    cell.get_frames().add(cellFrame);  
             
                 } 
 
 
                 // loop through every frame, and prepare the data. 
                 for (instanceIndex = 0; instanceIndex < instanceCount; instanceIndex++) { 
 
                  cellFrame = cell.get_frames().get_item(instanceIndex); 
                    // now, this is the MRTI info that contains the image information, width, height, tiles....etc.  
                    var mrtiInfo = new lt.Controls.Medical.MRTIImage(); 
 
                    // The image dpi.  
                    mrtiInfo.fullDpi = lt.LeadSizeD.create(150, 150); 
 
                    // the tile size, recommended value is 256  
                    mrtiInfo.tileSize = lt.LeadSizeD.create(512, 512); 
                    mrtiInfo.frameIndex = 0; 
 
                    // does this image support window level.  
                    mrtiInfo.supportWindowLevel = true; 
 
 
                    // different resolution for the image.  
                    var resolutions = [{"width": 512, "height": 512}, {"width": 256, "height": 256}, {"width": 128, "height": 128}, {"width": 64, "height": 64}];  
                    mrtiInfo.resolutions = []; 
                    for (var i = 0; i < resolutions.length; i++) { 
                       mrtiInfo.resolutions[i] = lt.LeadSizeD.create(resolutions[i].width, resolutions[i].height); 
                    } 
 
                    // the image width and height.  
                    cellFrame.set_width(mrtiInfo.resolutions[0].width); 
                    cellFrame.set_height(mrtiInfo.resolutions[0].height); 
 
                    // the image full size.  
                    mrtiInfo.fullSize = lt.LeadSizeD.create(cellFrame.get_width(), cellFrame.get_height()); 
 
                    // now we need the image URL,  
                    var imageUri = objectRetrieveAddress; 
                    imageUri += "/GetImageTile?auth="; 
                    imageUri += encodedAuthenticationCode; 
                    // this the image instance UID, change this if you want to retrieve anything else.  
                    imageUri += "&instance=" + json.SopInstanceUIDs[instanceIndex]; 
                     
 
                    mrtiInfo.imageUri = imageUri; 
 
                    // set this info to the cell frame.  
                    cellFrame.mrtiInfo = mrtiInfo; 
 
 
                    // now we need to set the information for the image so we can do window level.  
                    var imageInfo = new lt.Controls.Medical.DICOMImageInformation(); 
 
 
                    // set the image width and height.  
                    imageInfo.width = 512; 
                    imageInfo.height = 512; 
 
                    // bits per pixel for the image  
                    imageInfo.bitsPerPixel = 16; 
                    // low and high bit.  
                    imageInfo.lowBit = 0; 
                    imageInfo.highBit = 11; 
 
                    // other information, setting some of them to zero means that the toolkit will try and calculate it by itself, but you can always get those values from the DicomDataSet.  
                    imageInfo.modalityIntercept = -1024; 
                    imageInfo.modalitySlope = 1; 
                    imageInfo.minValue = 0; 
                    imageInfo.maxValue = 0; 
                    imageInfo.windowWidth = 200; 
                    imageInfo.windowCenter = 40; 
                    imageInfo.signed = false; 
                    imageInfo.photometricInterpretation = 'MONOCHROME2'; 
                    imageInfo.firstStoredPixelValueMapped = 0; 
 
                    // set these information to the frame.  
 
                    cellFrame.set_information(imageInfo); 
                  } 
 
                 // scroll to the middle of the series. 
                 cell.currentOffset = instanceCount >> 1; 
              } 
           } 
      
           getStackRequest.open("GET", getStackAddress, true);  
           getStackRequest.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');  
           // we log in as a 'guest', after calling the below line, we will receive the authentication code sent via 'onreadystatechange' above.  
           getStackRequest.send(); 
 
 
        }  
      };  
        
      // We are trying here to get an image from the Leadtools database, we need to login and get the authentication code.  
      xhttp.open("POST", "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp/api/auth/AuthenticateUser", true);  
        xhttp.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');  
         // we log in as a 'guest', after calling the below line, we will receive the authentication code sent via 'onreadystatechange' above.  
      xhttp.send(JSON.stringify({ userName: 'guest', password: 'guest', userData: '' })); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.medicalViewer, this.authenticationCode); 
      }); 
   } 
} 

SWITCHTOGENERIC:PanoramicPolygon.html 
<!doctype html> 
<html lang="en"> 
   <title>Panoramic Polygon Example</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Document.Viewer.js"></script> 
   <script src="../../LT/Leadtools.Controls.Medical.js"></script> 
   <style> 
      body { 
         font-family: 'Segoe UI', sans-serif; 
      } 
 
      #imageViewerDiv { 
         border: 1px solid #888; 
         width: 500px; 
         height: 500px; 
         background-color: #eee; 
      } 
   </style> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body  oncontextmenu="return false;"> 
   <p>Draw a panoramic polygon by clicking and tracing a polygon and then double click to end the polygon creation, and create a panoramic output.</p> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="imageViewerDiv"></div> 
   <div id="output"></div> 
</body> 
 
<script> 
   window.onload = () => { 
       const example = new window.examples.MedicalViewer.PanoramicPolygon(); 
 
   }; 
</script> 
</html>