Request3DData Event

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); 
        }); 
    } 
} 

import { MedicalViewer_MultiFrame_Example } from "../MedicalViewer_MultiFrame_Example"; 
 
 
export class Cell3D_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 cell3D : lt.Controls.Medical.Cell3D = new lt.Controls.Medical.Cell3D(medicalViewer, cell.divID + "_Cell3D"); 
      cell3D.seriesInstanceUID = cell.seriesInstanceUID; 
      cell3D.studyInstanceUID = cell3D.studyInstanceUID + "_3D"; 
   
 
      var threed = "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp/api/threed/"; 
 
      medicalViewer.layout.items.add(cell3D); 
 
      // create the engine. 
      cell3D.object3D = new lt.Controls.Medical.Object3DEngine(cell.divID + "_3D_Volume"); 
 
      // add the request 3D data event which will act as a proxy between the engine and the server. 
      var engine3D: lt.Controls.Medical.Object3DEngine = cell3D.object3D; 
      engine3D.add_request3DData(function (sender, args: lt.Controls.Medical.Request3DDataEventArgs) { 
 
         switch (args.type) { 
            // the engine is requesting the current progress value. 
            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; 
 
            // the engine is requesting the creation of the 3D object 
            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; 
 
            // the engine is requesting an image that contains the 3D rendered volume. 
            case lt.Controls.Medical.Requested3DDataType.render: 
               cell3D.image.src = args.JSON; 
               break; 
 
            // the engine is requesting deleting the 3D volume. 
            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; 
 
 
         } 
 
      }); 
 
      // this event is fired when the status of the 3D volume changed. 
      engine3D.add_statusChanged(function (sender, args: lt.Controls.Medical.StatusChangedEventArgs) { 
 
         switch (args.status) { 
            case lt.Controls.Medical.Object3DStatus.ready: 
               cell3D.URL = threed + "/Get3DImage?auth=" + authenticationCode; 
               break; 
         } 
 
      }); 
       
 
      // starts the engine, which will trigger the 3D volume creation process. 
      cell3D.start(""); 
 
      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); 
 
 
 
 
 
 
 
      // medicalViewer.emptyDivs.items.collectionChanged.add( (sender, e) => { 
      //    var index = 0; 
      //    var div; 
      //    var length = e.newItems.length; 
 
      //    if (e.get_action() === lt.NotifyLeadCollectionChangedAction.add) { 
      //       for (; index < length; index++) { 
 
      //          var emptyCell: lt.Controls.Medical.EmptyCell = e.newItems[index]; 
      //          div = emptyCell.div; 
      //          (<any>div.emptyCell) = emptyCell; 
      //          //div.addEventListener('mouseup', this.clicked); 
      //       } 
 
      //    } 
      // }); 
 
   } 
} 

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); 
      }); 
   } 
} 

<!doctype html> 
<html lang="en"> 
<title>3D Cell 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>Create a 3D volume.</p> 
   <p>Run the example, and generat the 3d volume, use the left mouse button to rotate the 3D volume.</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.Cell3D(); 
 
   }; 
</script> 
</html>