AnnBatesStampComposer Object

Summary

AnnBatesStampComposer is the main component of Bates stamping operations. It connects annotation containers with Bates stamp objects.

Syntax
TypeScript
JavaScript
function lt.Annotations.BatesStamp.AnnBatesStampComposer 
	implements IDisposable 
class lt.Annotations.BatesStamp.AnnBatesStampComposer() 
	implements IDisposable 

Remarks

Use this composer to add target containers in order to apply Bates stamps to them. It allows the addition of AnnBatesStamp objects. Also, this composer has the ability to save and load the Bates stamp list.

Example

This example will create a Bates stamp object with multiple elements then use the composer to attach the Bates stamp to the target container.

AnnBatesStampComposer.ts
BatesStampHelper.ts
AnnBatesStampComposer.js
BatesStampHelper.js
AnnBatesStampComposer.html
import { BatesStampHelper } from "../utilities/BatesStampHelper"; 
 
export class BatesStampComposer_Example { 
   constructor() { 
      const helper = new BatesStampHelper(); 
      helper.run(this.compose); 
   } 
 
   private compose = (automation) => { 
      //Create AnnBatesStamp and set its properties 
      const batesStamp: lt.Annotations.BatesStamp.AnnBatesStamp = new lt.Annotations.BatesStamp.AnnBatesStamp(); 
      batesStamp.font = new lt.Annotations.Engine.AnnFont("Arial", 12); 
      batesStamp.foreground = lt.Annotations.Engine.AnnSolidColorBrush.create("Red"); 
      batesStamp.horizontalAlignment = lt.Annotations.Engine.AnnHorizontalAlignment.center; 
      batesStamp.verticalAlignment = lt.Annotations.Engine.AnnVerticalAlignment.center; 
      batesStamp.logo.angle = -45; 
      batesStamp.logo.font = new lt.Annotations.Engine.AnnFont("Arial", 14); 
      batesStamp.logo.opacity = 0.5; 
      batesStamp.logo.stretchLogo = true; 
      batesStamp.logo.picture = new lt.Annotations.Engine.AnnPicture("https://www.leadtools.com/images/page_graphics/leadlogo.png"); 
 
      //Add some elements to Bates stamp elements list 
      batesStamp.elements.add(new lt.Annotations.BatesStamp.AnnBatesNumber()); 
      batesStamp.elements.add(lt.Annotations.BatesStamp.AnnBatesText.create(" ")); 
 
      batesStamp.elements.add(lt.Annotations.BatesStamp.AnnBatesText.create(" This is text element")); 
 
      //Create AnnBatesStampComposer instance and add the created Bates stamp to it 
      const batesStampComposer: lt.Annotations.BatesStamp.AnnBatesStampComposer = new lt.Annotations.BatesStamp.AnnBatesStampComposer(); 
      //Set the rendering engine 
      lt.Annotations.BatesStamp.AnnBatesStampComposer.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      batesStampComposer.stamps.add(batesStamp); 
 
      //Use the main automation object for your application instead of _automation we used here 
      const mainContainer: lt.Annotations.Engine.AnnContainer = automation.container; 
 
      //Create Bates stamp container, set its size and mapper and attach it to the composer 
      const batesStampContainer: lt.Annotations.Engine.AnnContainer = new lt.Annotations.Engine.AnnContainer(); 
      batesStampContainer.size = mainContainer.size; 
      batesStampContainer.mapper = mainContainer.mapper.clone(); 
 
      //Apply Bates Stamp to our container 
      batesStampComposer.targetContainers.add(batesStampContainer); 
 
      //Insert the Bates stamp container below all other containers in the automation 
      automation.containers.insertItem(0, batesStampContainer); 
 
      //Print the content of this Bates stamp 
      alert(batesStamp.asString(batesStampContainer)); //  the output will be "000001 This is text element" 
 
      //Render the containers 
      automation.invalidate(lt.LeadRectD.empty); 
 
      // Hook to rendering engine loadPicture event to render the container immediately after resources get loaded 
      automation.manager.renderingEngine.add_loadPicture((sender, e) => { 
         automation.invalidate(lt.LeadRectD.empty); 
      }); 
   } 
} 
export class BatesStampHelper { 
   protected _automation: lt.Annotations.Automation.AnnAutomation; 
   // Image viewer 
   private _viewer: lt.Controls.ImageViewer; 
 
   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) => 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: number = automationObj.id; 
         currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id.toString()); 
      } 
 
      // 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 = 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); 
      } 
   } 
} 
import { BatesStampHelper } from "../utilities/BatesStampHelper"; 
 
export class BatesStampComposer_Example { 
   constructor() { 
      const helper = new BatesStampHelper(); 
      helper.run(this.compose); 
   } 
 
   compose = (automation) => { 
      //Create AnnBatesStamp and set its properties 
      const batesStamp = new lt.Annotations.BatesStamp.AnnBatesStamp(); 
      batesStamp.font = new lt.Annotations.Engine.AnnFont("Arial", 12); 
      batesStamp.foreground = lt.Annotations.Engine.AnnSolidColorBrush.create("Red"); 
      batesStamp.horizontalAlignment = lt.Annotations.Engine.AnnHorizontalAlignment.center; 
      batesStamp.verticalAlignment = lt.Annotations.Engine.AnnVerticalAlignment.center; 
      batesStamp.logo.angle = -45; 
      batesStamp.logo.font = new lt.Annotations.Engine.AnnFont("Arial", 14); 
      batesStamp.logo.opacity = 0.5; 
      batesStamp.logo.stretchLogo = true; 
      batesStamp.logo.picture = new lt.Annotations.Engine.AnnPicture("https://www.leadtools.com/images/page_graphics/leadlogo.png"); 
 
      //Add some elements to Bates stamp elements list 
      batesStamp.elements.add(new lt.Annotations.BatesStamp.AnnBatesNumber()); 
      batesStamp.elements.add(lt.Annotations.BatesStamp.AnnBatesText.create(" ")); 
 
      batesStamp.elements.add(lt.Annotations.BatesStamp.AnnBatesText.create(" This is text element")); 
 
      //Create AnnBatesStampComposer instance and add the created Bates stamp to it 
      const batesStampComposer = new lt.Annotations.BatesStamp.AnnBatesStampComposer(); 
      //Set the rendering engine 
      lt.Annotations.BatesStamp.AnnBatesStampComposer.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      batesStampComposer.stamps.add(batesStamp); 
 
      //Use the main automation object for your application instead of _automation we used here 
      const mainContainer = automation.container; 
 
      //Create Bates stamp container, set its size and mapper and attach it to the composer 
      const batesStampContainer = new lt.Annotations.Engine.AnnContainer(); 
      batesStampContainer.size = mainContainer.size; 
      batesStampContainer.mapper = mainContainer.mapper.clone(); 
 
      //Apply Bates Stamp to our container 
      batesStampComposer.targetContainers.add(batesStampContainer); 
 
      //Insert the Bates stamp container below all other containers in the automation 
      automation.containers.insertItem(0, batesStampContainer); 
 
      //Print the content of this Bates stamp 
      alert(batesStamp.asString(batesStampContainer)); //  the output will be "000001 This is text element" 
 
      //Render the containers 
      automation.invalidate(lt.LeadRectD.empty); 
 
      // Hook to rendering engine loadPicture event to render the container immediately after resources get loaded 
      automation.manager.renderingEngine.add_loadPicture((sender, e) => { 
         automation.invalidate(lt.LeadRectD.empty); 
      }); 
   } 
} 
export class BatesStampHelper { 
   _automation; 
   // Image viewer 
   _viewer; 
 
   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; 
         currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id.toString()); 
      } 
 
      // 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); 
      } 
   } 
} 
<!doctype html> 
<html lang="en"> 
<title>BatesStamp Example | Composer</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.BatesStamp.Composer(); 
</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.BatesStamp Assembly