calibrate Method

Summary

Sets the ruler calibration scale.

Syntax
TypeScript
JavaScript
AnnContainerMapper.prototype.calibrate = function( 
   sourceLength, 
   sourceUnit, 
   destinationLength, 
   destinationUnit 
) 

Parameters

sourceLength

Known source length value

sourceUnit

Unit of measure for sourceLength

destinationLength

What the destination length must be

destinationUnit

Unit of measure for destinationUnit

Remarks

This method will use the parameters to calculate a new value for CalibrationScale. This value is used afterwards by all the existing rulers as well as new ruler objects created in this container.

Calibrating a ruler means assigning a specific length to it. For example, on a digital X-ray of a hand, you may draw an annotation ruler object along one of the fingers. You know that this distance is supposed to be exactly 6.5 cm. Use calibrate to calibrate this ruler, all existing rulers, and all newly created rulers so that they would precisely measure this distance to be 6.5 cm. This is accomplished by first drawing a ruler on the container till it matches exactly the length of the finger - ignoring the values shown - then using Calibrate as shown in the example.

Example

This example will draw a ruler with a length that is assumed to be 6.5cm. It then uses Calibrate to set the mapper calibration scale.

Calibrate.ts
EngineHelper.ts
Calibrate.js
EngineHelper.js
Calibrate.html
import { EngineHelper } from "../utilities/EngineHelper"; 
 
export class AnnContainerMapper_CalibrateExample { 
   constructor() { 
      const helper = new EngineHelper(); 
      helper.run(this.calibrate); 
   } 
 
   calibrate = (automation: lt.Annotations.Automation.AnnAutomation) => { 
      // Add a ruler with a length of 1 inch to the container 
      const container: lt.Annotations.Engine.AnnContainer = automation.container; 
      const inch: number = 720; 
      const rulerObj: lt.Annotations.Engine.AnnPolyRulerObject = new lt.Annotations.Engine.AnnPolyRulerObject(); 
      rulerObj.points.add(lt.LeadPointD.create(1 * inch, 1 * inch)); 
      rulerObj.points.add(lt.LeadPointD.create(2 * inch, 1 * inch)); 
      rulerObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("red"), lt.LeadLengthD.create(1)); 
      rulerObj.showGauge = true; 
      rulerObj.showTickMarks = true; 
      rulerObj.measurementUnit = lt.Annotations.Engine.AnnUnit.inch; 
      container.children.add(rulerObj); 
 
      // Show the ruler 
      automation.invalidate(lt.LeadRectD.empty); 
      alert("Ruler to calibrate, length is 1 inch"); 
 
      // Get the length of the ruler 
      const point1: lt.LeadPointD = rulerObj.points.item(0); 
      const point2: lt.LeadPointD = rulerObj.points.item(1); 
      const length: number = Math.sqrt(Math.pow(Math.abs(point2.x - point1.x), 2) + Math.pow(Math.abs(point2.y - point1.y), 2)); 
 
      // Calibrate the container mapper 
      container.mapper.calibrate( 
         lt.LeadLengthD.create(length),           // Source length 
         lt.Annotations.Engine.AnnUnit.unit,        // Source unit (container units) 
         lt.LeadLengthD.create(6.5),              // Destination length 
         lt.Annotations.Engine.AnnUnit.centimeter); // Destination unit 
 
      // Use the Centimeters as the measurement unit in the ruler 
      rulerObj.measurementUnit = lt.Annotations.Engine.AnnUnit.centimeter; 
 
      // Now rulerObj should show 6.5 Centimeter as its length 
      automation.invalidate(lt.LeadRectD.empty); 
      alert("Calibrated, length is 6.5 cm"); 
   } 
} 
export class EngineHelper { 
   // Automation object 
   protected _automation: lt.Annotations.Automation.AnnAutomation = null; 
   // Image viewer 
   protected _viewer: lt.Controls.ImageViewer = null; 
 
   constructor() { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
   } 
 
   public run(callback?: (automation: lt.Annotations.Automation.AnnAutomation, viewer: lt.Controls.ImageViewer) => void): void { 
      // Create the viewer 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      const viewer: lt.Controls.ImageViewer = new lt.Controls.ImageViewer(createOptions); 
      viewer.autoCreateCanvas = true; 
      this._viewer = viewer; 
 
      // PanZoom interactive mode 
      const panZoom: lt.Controls.ImageViewerPanZoomInteractiveMode = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
 
      // Create an instance of the Automation control object that works with LEADTOOLS ImageViewer 
      const imageViewerAutomationControl: lt.Demos.Annotations.ImageViewerAutomationControl = new lt.Demos.Annotations.ImageViewerAutomationControl(); 
      // Attach our image viewer 
      imageViewerAutomationControl.imageViewer = viewer; 
 
      // Set the image viewer interactive mode 
      const automationInteractiveMode: lt.Demos.Annotations.AutomationInteractiveMode = new lt.Demos.Annotations.AutomationInteractiveMode(); 
      automationInteractiveMode.automationControl = imageViewerAutomationControl; 
 
      // Set the image URL 
      viewer.imageUrl = "http://demo.leadtools.com/images/png/pngimage.png"; 
 
      // Create and set up the automation manager using the HTML5 rendering engine 
      const renderingEngine: lt.Annotations.Rendering.AnnHtml5RenderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      const manager: lt.Annotations.Automation.AnnAutomationManager = lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine); 
 
      // Create default automation objects 
      manager.createDefaultObjects(); 
 
      // Add the objects to the objects select element 
      const currentObjectIdSelect = document.getElementById("currentObjectIdSelect") as HTMLSelectElement; 
      // Add the PanZoom option 
      currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option("Pan/Zoom", lt.Annotations.Engine.AnnObject.none.toString()); 
 
      const automationObjCount: number = manager.objects.count; 
      for (let i = 0; i < automationObjCount; i++) { 
         // Get the object 
         const automationObj: lt.Annotations.Automation.AnnAutomationObject = manager.objects.item(i); 
 
         // Add its name to the select element 
         const name: string = automationObj.name; 
         const id: string = automationObj.id.toString(); 
         currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id); 
      } 
 
      // Hook to its change event 
      currentObjectIdSelect.addEventListener("change", () => { 
         // Get the object ID 
         const id: number = parseInt(currentObjectIdSelect.options[currentObjectIdSelect.selectedIndex].value); 
 
         // Set it as the current object in the manager 
         manager.currentObjectId = id; 
 
         // If this is the "Pan/Zoom" option, then back to pan zoom, otherwise, set our automation control 
         if (id == lt.Annotations.Engine.AnnObject.none) { 
            viewer.defaultInteractiveMode = panZoom; 
         } 
         else { 
            viewer.defaultInteractiveMode = automationInteractiveMode; 
         } 
      }); 
 
      // When the current object ID changes, we need to update our select 
      manager.add_currentObjectIdChanged((sender, e) => { 
         const currentObjectId: number = manager.currentObjectId; 
         for (let i = 0; i < currentObjectIdSelect.options.length; i++) { 
            const id: number = parseInt(currentObjectIdSelect.options[i].value); 
            if (id === currentObjectId) { 
               currentObjectIdSelect.selectedIndex = i; 
               break; 
            } 
         } 
      }); 
 
      // Pan zoom by default 
      viewer.defaultInteractiveMode = panZoom; 
 
      // set up the automation (will create the container as well) 
      const automation: lt.Annotations.Automation.AnnAutomation = new lt.Annotations.Automation.AnnAutomation(manager, imageViewerAutomationControl); 
      this._automation = automation; 
 
      // Add handler to update the container size when the image size changes 
      viewer.itemChanged.add((sender, e) => { 
         const container: lt.Annotations.Engine.AnnContainer = automation.container; 
         container.size = container.mapper.sizeToContainerCoordinates(viewer.imageSize); 
 
         //Create new canvas data provider for the new image 
         const canvasDataProvider: lt.Demos.Annotations.CanvasDataProvider = new lt.Demos.Annotations.CanvasDataProvider(viewer.activeItem.canvas); 
         imageViewerAutomationControl.automationDataProvider = canvasDataProvider; 
 
      }); 
 
      // set up this automation as the active one 
      this._automation.active = true; 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.onclick = () => { 
         if(callback) 
            callback(this._automation, this._viewer); 
      } 
   } 
} 
import { EngineHelper } from "../utilities/EngineHelper"; 
 
export class AnnContainerMapper_CalibrateExample { 
   constructor() { 
      const helper = new EngineHelper(); 
      helper.run(this.calibrate); 
   } 
 
   calibrate = (automation) => { 
      // Add a ruler with a length of 1 inch to the container 
      const container = automation.container; 
      const inch = 720; 
      const rulerObj = new lt.Annotations.Engine.AnnPolyRulerObject(); 
      rulerObj.points.add(lt.LeadPointD.create(1 * inch, 1 * inch)); 
      rulerObj.points.add(lt.LeadPointD.create(2 * inch, 1 * inch)); 
      rulerObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("red"), lt.LeadLengthD.create(1)); 
      rulerObj.showGauge = true; 
      rulerObj.showTickMarks = true; 
      rulerObj.measurementUnit = lt.Annotations.Engine.AnnUnit.inch; 
      container.children.add(rulerObj); 
 
      // Show the ruler 
      automation.invalidate(lt.LeadRectD.empty); 
      alert("Ruler to calibrate, length is 1 inch"); 
 
      // Get the length of the ruler 
      const point1 = rulerObj.points.item(0); 
      const point2 = rulerObj.points.item(1); 
      const length = Math.sqrt(Math.pow(Math.abs(point2.x - point1.x), 2) + Math.pow(Math.abs(point2.y - point1.y), 2)); 
 
      // Calibrate the container mapper 
      container.mapper.calibrate( 
         lt.LeadLengthD.create(length),           // Source length 
         lt.Annotations.Engine.AnnUnit.unit,        // Source unit (container units) 
         lt.LeadLengthD.create(6.5),              // Destination length 
         lt.Annotations.Engine.AnnUnit.centimeter); // Destination unit 
 
      // Use the Centimeters as the measurement unit in the ruler 
      rulerObj.measurementUnit = lt.Annotations.Engine.AnnUnit.centimeter; 
 
      // Now rulerObj should show 6.5 Centimeter as its length 
      automation.invalidate(lt.LeadRectD.empty); 
      alert("Calibrated, length is 6.5 cm"); 
   } 
} 
export class EngineHelper { 
   // Automation object 
   _automation = null; 
   // Image viewer 
   _viewer = null; 
 
   constructor() { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
   } 
 
   run(callback) { 
      // Create the viewer 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      const viewer = new lt.Controls.ImageViewer(createOptions); 
      viewer.autoCreateCanvas = true; 
      this._viewer = viewer; 
 
      // PanZoom interactive mode 
      const panZoom = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
 
      // Create an instance of the Automation control object that works with LEADTOOLS ImageViewer 
      const imageViewerAutomationControl = new lt.Demos.Annotations.ImageViewerAutomationControl(); 
      // Attach our image viewer 
      imageViewerAutomationControl.imageViewer = viewer; 
 
      // Set the image viewer interactive mode 
      const automationInteractiveMode = new lt.Demos.Annotations.AutomationInteractiveMode(); 
      automationInteractiveMode.automationControl = imageViewerAutomationControl; 
 
      // Set the image URL 
      viewer.imageUrl = "http://demo.leadtools.com/images/png/pngimage.png"; 
 
      // Create and set up the automation manager using the HTML5 rendering engine 
      const renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      const manager = lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine); 
 
      // Create default automation objects 
      manager.createDefaultObjects(); 
 
      // Add the objects to the objects select element 
      const currentObjectIdSelect = document.getElementById("currentObjectIdSelect"); 
      // Add the PanZoom option 
      currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option("Pan/Zoom", lt.Annotations.Engine.AnnObject.none.toString()); 
 
      const automationObjCount = manager.objects.count; 
      for (let i = 0; i < automationObjCount; i++) { 
         // Get the object 
         const automationObj = manager.objects.item(i); 
 
         // Add its name to the select element 
         const name = automationObj.name; 
         const id = automationObj.id.toString(); 
         currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id); 
      } 
 
      // Hook to its change event 
      currentObjectIdSelect.addEventListener("change", () => { 
         // Get the object ID 
         const id = parseInt(currentObjectIdSelect.options[currentObjectIdSelect.selectedIndex].value); 
 
         // Set it as the current object in the manager 
         manager.currentObjectId = id; 
 
         // If this is the "Pan/Zoom" option, then back to pan zoom, otherwise, set our automation control 
         if (id == lt.Annotations.Engine.AnnObject.none) { 
            viewer.defaultInteractiveMode = panZoom; 
         } 
         else { 
            viewer.defaultInteractiveMode = automationInteractiveMode; 
         } 
      }); 
 
      // When the current object ID changes, we need to update our select 
      manager.add_currentObjectIdChanged((sender, e) => { 
         const currentObjectId = manager.currentObjectId; 
         for (let i = 0; i < currentObjectIdSelect.options.length; i++) { 
            const id = parseInt(currentObjectIdSelect.options[i].value); 
            if (id === currentObjectId) { 
               currentObjectIdSelect.selectedIndex = i; 
               break; 
            } 
         } 
      }); 
 
      // Pan zoom by default 
      viewer.defaultInteractiveMode = panZoom; 
 
      // set up the automation (will create the container as well) 
      const automation = new lt.Annotations.Automation.AnnAutomation(manager, imageViewerAutomationControl); 
      this._automation = automation; 
 
      // Add handler to update the container size when the image size changes 
      viewer.itemChanged.add((sender, e) => { 
         const container = automation.container; 
         container.size = container.mapper.sizeToContainerCoordinates(viewer.imageSize); 
 
         //Create new canvas data provider for the new image 
         const canvasDataProvider = new lt.Demos.Annotations.CanvasDataProvider(viewer.activeItem.canvas); 
         imageViewerAutomationControl.automationDataProvider = canvasDataProvider; 
 
      }); 
 
      // set up this automation as the active one 
      this._automation.active = true; 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.onclick = () => { 
         if(callback) 
            callback(this._automation, this._viewer); 
      } 
   } 
} 
<!doctype html> 
<html lang="en"> 
<title>AnnEngine Example | AnnSerializeOptions</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.Annotations.BatesStamp.js"></script> 
   <script src="../LT/Leadtools.Demos.js"></script> 
   <script src="../LT/Leadtools.Demos.Annotations.js"></script> 
   <style> 
      #imageViewerDiv { 
         border: 1px solid #000000; 
         width: 800px; 
         height: 800px; 
         background-color: #7F7F7F; 
      } 
   </style> 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <p>Either Pan/Zoom or Annotations mode. In annotations mode, draw new objects or edit them.</p> 
   <div> 
      <select id="currentObjectIdSelect"></select> 
   </div> 
   <div> 
      <input type="button" id="exampleButton" value="Example" /> 
      <label id="exampleLabel" /> 
   </div> 
   <div id="imageViewerDiv" /> 
</body> 
 
<script> 
   window.onload = () => new window.examples.AnnEngine.Calibrate(); 
</script> 
</html> 

Requirements

Target Platforms

Help Version 20.0.2020.3.31
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2020 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Annotations.Engine Assembly