In This Topic ▼

Requested3DDataType Enumeration

Summary

Specifies the requested data type.

Syntax

TypeScript

JavaScript

lt.Controls.Medical.Requested3DDataType = { 
	none: -1, 
	create3DObject: 0, 
	render: 1, 
	creationProgress: 2, 
	keepServerObjectAlive: 3, 
	delete3DObject: 4, 
	update3DSettings: 5, 
	get3DInfo: 6, 
	renderPanoramic: 7 
}

lt.Controls.Medical.Requested3DDataType = { 
	none: -1, 
	create3DObject: 0, 
	render: 1, 
	creationProgress: 2, 
	keepServerObjectAlive: 3, 
	delete3DObject: 4, 
	update3DSettings: 5, 
	get3DInfo: 6, 
	renderPanoramic: 7 
}

Members

Value	Member	Description
0	Create3DObject	Asks the server to create the 3D object.
1	Render	Requests from the server an image of the rendered 3D volume.
2	CreationProgress	Requests the percentage status of the 3D object creation process.
3	KeepServerObjectAlive	Sends to the server the object that is still alive and still being used.
4	Delete3DObject	Tells the server to delete the 3D object.
5	Update3DSettings	Sends the server a request to change some of the 3D object properties.
6	Get3DInfo	Requests some 3D object properties from the server.
7	RenderPanoramic	Request the server to render in panoramic mode.

Remarks

Requested3DDataType is used with the event Request3DData
In order to have Requested3DDataType fired, first call Start.

Example

Cell3D.js

MedicalViewer_MultiFrame_Example.js

Cell3D.ts

MedicalViewer_MultiFrame_Example.ts

Cell3D.html

 
import { MedicalViewer_MultiFrame_Example } from "../MedicalViewer_MultiFrame_Example"; 
 
export class Cell3D_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.cells.get_item(0); 
            var _frame = cell.frames.get_item(cell.currentOffset); 
            var 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/MedicalViewerServiceAsp22/api/threed/"; 
            medicalViewer.layout.cells.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 = cell3D.object3D; 
            engine3D.add_request3DData(function (sender, args) { 
                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) { 
                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); 
        }; 
        this.viewerExample = new MedicalViewer_MultiFrame_Example(this.run); 
    } 
}

export class MedicalViewer_MultiFrame_Example { 
    constructor(callback) { 
        var _this = this; 
        // 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/js/LEADTOOLSEVAL.txt", "EVAL", null); 
        // Create an image viewer inside the imageViewerDiv element 
        var imageViewerDiv = document.getElementById("imageViewerDiv"); 
        var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
        var aspPath = "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp22/"; 
        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 = self.authenticationCode; 
                // we get here the object retrieve address that points to a service that retireves the information and the images from the server. 
                var objectRetrieveAddress = aspPath + "api/retrieve"; 
                var objectRetrieveQueryAddress = aspPath + "api/query"; 
                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 instances information. 
                var queryArchive = objectRetrieveQueryAddress; 
                queryArchive += "/FindInstances"; 
                var getStackRequest = new XMLHttpRequest(); 
                getStackRequest.onreadystatechange = function (data) { 
                    if (this.readyState == 4 && this.status == 200) { 
                        var json = JSON.parse(this.responseText); 
                        var instanceIndex = 0; 
                        // if instance count is zero, then the study doesn't exist on the server. 
                        var instanceCount = json.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); 
                            var pageInfo = json[instanceIndex].Pages[0]; 
                            cellFrame.imagePosition = pageInfo.ImagePositionPatientArray; 
                            cellFrame.imageOrientation = pageInfo.ImageOrientationPatientArray; 
                            if (pageInfo.PixelSpacingPatientArray != null && pageInfo.PixelSpacingPatientArray.length == 2) { 
                                cellFrame.set_rowSpacing(parseFloat(pageInfo.PixelSpacingPatientArray[1])); 
                                cellFrame.set_columnSpacing(parseFloat(pageInfo.PixelSpacingPatientArray[0])); 
                            } 
                            // 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 leve.  
                            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[instanceIndex].SOPInstanceUID; 
                            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("POST", queryArchive, true); 
                getStackRequest.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
                var queryParams = { 
                    "PatientsOptions": {}, 
                    "StudiesOptions": {}, 
                    "SeriesOptions": { "SeriesInstanceUID": seriesInstanceUID } 
                }; 
                var findInstanceData = { 
                    authenticationCookie: encodedAuthenticationCode, 
                    options: queryParams, 
                    extraOptions: { UserData2: "" } 
                }; 
                getStackRequest.send(JSON.stringify(findInstanceData)); 
            } 
        }; 
        // 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/MedicalViewerServiceAsp22/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: '' })); 
        var exampleButton = document.getElementById("exampleButton"); 
        exampleButton.addEventListener("click", function () { 
            _this.timesClicked++; 
            // Run the example 
            if (callback) 
                callback(_this.medicalViewer, _this.authenticationCode); 
        }); 
    } 
}

///<reference path="../../../static/LT/Leadtools.d.ts"/> 
///<reference path="../../../static/LT/Leadtools.Controls.d.ts"/> 
///<reference path="../../../static/LT/Leadtools.Controls.Medical.d.ts"/> 
 
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.cells.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/MedicalViewerServiceAsp22/api/threed/"; 
 
      medicalViewer.layout.cells.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/js/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); 
 
 
 
      var aspPath = "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp22/"; 
 
      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 = self.authenticationCode; 
 
            // we get here the object retrieve address that points to a service that retireves the information and the images from the server. 
            var objectRetrieveAddress = aspPath + "api/retrieve"; 
            var objectRetrieveQueryAddress = aspPath + "api/query"; 
 
            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 instances information. 
            var queryArchive = objectRetrieveQueryAddress; 
            queryArchive += "/FindInstances"; 
 
 
            var getStackRequest = new XMLHttpRequest(); 
            getStackRequest.onreadystatechange = function (data) { 
               if (this.readyState == 4 && this.status == 200) { 
                  var json = JSON.parse(this.responseText); 
 
                  var instanceIndex = 0; 
 
                  // if instance count is zero, then the study doesn't exist on the server. 
                  var instanceCount = json.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); 
 
                     var pageInfo = json[instanceIndex].Pages[0]; 
 
                     cellFrame.imagePosition = pageInfo.ImagePositionPatientArray; 
 
                     cellFrame.imageOrientation = pageInfo.ImageOrientationPatientArray; 
 
 
                     if (pageInfo.PixelSpacingPatientArray != null && pageInfo.PixelSpacingPatientArray.length == 2) { 
                        cellFrame.set_rowSpacing(parseFloat(pageInfo.PixelSpacingPatientArray[1])); 
                        cellFrame.set_columnSpacing(parseFloat(pageInfo.PixelSpacingPatientArray[0])); 
                     } 
 
 
                     // 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 leve.  
                     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[instanceIndex].SOPInstanceUID; 
 
 
                     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.autoScaleIntercept = -1024; 
                     imageInfo.autoScaleSlope = 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("POST", queryArchive, true); 
            getStackRequest.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
 
            var queryParams = 
            { 
               "PatientsOptions": {}, 
               "StudiesOptions": {}, 
               "SeriesOptions": { "SeriesInstanceUID": seriesInstanceUID } 
            }; 
 
 
            var findInstanceData = { 
               authenticationCookie: encodedAuthenticationCode, 
               options: queryParams, 
               extraOptions: { UserData2: "" } 
            }; 
 
 
            getStackRequest.send(JSON.stringify(findInstanceData)); 
 
 
         } 
      }; 
 
      // 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/MedicalViewerServiceAsp22/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>

Requirements

Target Platforms

Reference

Leadtools.Controls.Medical Namespace

Download our FREE evaluation

Help Version 22.0.2023.2.14

Leadtools.Controls.Medical Assembly

Introduction

Getting Started

Namespaces

Leadtools.Controls.Medical Namespace

Assemblies