AnnAutomationManager Object

Summary

Manages the automation mode for an annotation application.

Syntax
TypeScript
JavaScript
function lt.Annotations.Automation.AnnAutomationManager 
class lt.Annotations.Automation.AnnAutomationManager() 

Remarks

The AnnAutomationManager class holds the collection of all AnnAutomation objects in the application as well various other user interface options.

An automated annotation application usually creates one AnnAutomationManager object per application.

Example

The following example creates an automated annotation application. The following example will only use the line and rectangle objects. The example lets you draw objects on top of the image, select objects, move them or change them.

To run this example perform the following steps:

  • Copy and paste this example into your favorite text editor and save it as an HTML file with any name (for example, "Default.htm"), to a folder on your disk.
  • Inside the folder containing the new HTML file, create a directory with the name "Scripts".
  • Copy the required .js files in the example from the <LEADTOOLS_INSTALLDIR>\Bin\JS" to "Scripts. Finally, open the HTML file in any browser that supports HTML 5.
TypeScript
JavaScript
<!DOCTYPE html> 
<html> 
<head> 
  <title>Leadtools Examples</title> 
  <meta http-equiv="X-UA-Compatible" content="IE=9" /> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> 
  <meta name="apple-mobile-web-app-capable" content="yes" /> 
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
  <style> 
    #imageViewerDiv 
    { 
      border: 1px solid #000000; 
      width: 800px; 
      height: 800px; 
      background-color: #7F7F7F; 
    } 
  </style> 
  <script src="Scripts/Leadtools.js"></script> 
  <script src="Scripts/Leadtools.Controls.js"></script> 
  <script src="Scripts/Leadtools.Annotations.Engine.js"></script> 
  <script src="Scripts/Leadtools.Annotations.Designers.js"></script> 
  <script src="Scripts/Leadtools.Annotations.Rendering.JavaScript.js"></script> 
  <script src="Scripts/Leadtools.Annotations.Automation.js"></script> 
  <script src="Scripts/Leadtools.Demos.js"></script> 
  <script src="Scripts/Leadtools.Demos.Annotations.js"></script> 
  <script type="text/javascript"> 
    (function () { 
      DefaultPage = function DefaultPage() { 
        // Set the LEADTOOLS license. Replace this with your actual license file 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
      } 
 
      DefaultPage.prototype = { 
 
        // Automation object 
        _automation: null, 
 
        example: function SiteLibrary_DefaultPage$example() { 
          // TODO: add example code here 
          alert("example code goes here"); 
        }, 
 
        run: function SiteLibrary_DefaultPage$run() { 
          var _this = this; 
 
          // Create the viewer 
          var imageViewerDiv = document.getElementById("imageViewerDiv"); 
          var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
          var viewer = new lt.Controls.ImageViewer(createOptions); 
          viewer.autoCreateCanvas = true; 
           
          // PanZoom interactive mode 
          var panZoom = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
 
          // Create an instance of the Automation control object that works with LEADTOOLS ImageViewer 
          var imageViewerAutomationControl = new lt.Demos.Annotations.ImageViewerAutomationControl(); 
          // Attach our image viewer 
          imageViewerAutomationControl.imageViewer = viewer; 
 
          // Set the image viewer interactive mode 
          var 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 
          var renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
          var manager = new lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine); 
 
          // Create only the line and rectangle automation objects 
          this.createMyAutomationObjects(manager); 
 
          // You can instruct the manager to create the default (all) automation objects. 
          // comment out the call to CreateMyAutomationObjects and call this instead: 
          //manager.createDefaultObjects(); 
 
          // Add the objects to the objects select element 
          var currentObjectIdSelect = document.getElementById("currentObjectIdSelect"); 
          // Add the PanZoom option 
          currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option("Pan/Zoom", lt.Annotations.Engine.AnnObject.none); 
 
          var automationObjCount = manager.get_objects().get_count(); 
          for (var i = 0; i < automationObjCount; i++) { 
            // Get the object 
            var automationObj = manager.get_objects().get_item(i); 
 
            // Add its name to the select element 
            var name = automationObj.get_name(); 
            var id = automationObj.get_id(); 
            currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id); 
          } 
 
          // Hook to its change event 
          currentObjectIdSelect.addEventListener("change", function() { 
            // Get the object ID 
            var id = parseInt(currentObjectIdSelect.options[currentObjectIdSelect.selectedIndex].value); 
 
            // Set it as the current object in the manager 
            manager.set_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.set_defaultInteractiveMode(panZoom); 
            } 
            else { 
              viewer.set_defaultInteractiveMode(automationInteractiveMode); 
            } 
          }); 
 
          // When the current object ID changes, we need to update our select 
          manager.add_currentObjectIdChanged(function(sender, e) { 
            var currentObjectId = manager.get_currentObjectId(); 
            for(var i = 0; i < currentObjectIdSelect.options.length; i++) { 
              var id = parseInt(currentObjectIdSelect.options[i].value); 
              if(id === currentObjectId) { 
                currentObjectIdSelect.selectedIndex = i; 
                break; 
              } 
            } 
          }); 
 
          // Pan zoom by default 
          viewer.set_defaultInteractiveMode(panZoom); 
 
          // set up the automation (will create the container as well) 
          var 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(function (sender, e) { 
            var container = automation.container; 
            container.size = container.mapper.sizeToContainerCoordinates(viewer.imageSize); 
 
            //Create new canvas data provider for the new image 
            var canvasDataProvider = new lt.Demos.Annotations.CanvasDataProvider(viewer.activeItem.canvas); 
            imageViewerAutomationControl.automationDataProvider = canvasDataProvider; 
 
          }); 
 
          // set up this automation as the active one 
          this._automation.set_active(true); 
 
          var exampleButton = document.getElementById("exampleButton"); 
          exampleButton.addEventListener("click", function(e) { 
            _this.example(); 
          }, false); 
        }, 
 
        createMyAutomationObjects: function createMyAutomationObjects(manager) { 
          // Get the automation objects collection 
          var automationObjects = manager.get_objects(); 
 
          // Set up the select automation object 
          var automationObj = new lt.Annotations.Automation.AnnAutomationObject(); 
          automationObj.set_id(lt.Annotations.Engine.AnnObject.selectObjectId); 
          automationObj.set_name("Select"); 
          automationObj.set_drawDesignerType(lt.Annotations.Designers.AnnRectangleDrawDesigner); 
          automationObj.set_editDesignerType(lt.Annotations.Designers.AnnSelectionEditDesigner); 
          automationObj.set_runDesignerType(null); 
 
          // Create the object template for it 
          var selectObj = new lt.Annotations.Engine.AnnSelectionObject(); 
          selectObj.set_stroke(lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("darkgreen"), lt.LeadLengthD.create(2))); 
          automationObj.set_objectTemplate(selectObj); 
 
          // Add it to the automation objects of the manager 
          automationObjects.add(automationObj); 
 
          // Set up the line automation object 
          automationObj = new lt.Annotations.Automation.AnnAutomationObject(); 
          automationObj.set_id(lt.Annotations.Engine.AnnObject.lineObjectId); 
          automationObj.set_name("Line"); 
          automationObj.set_drawDesignerType(lt.Annotations.Designers.AnnLineDrawDesigner); 
          automationObj.set_editDesignerType(lt.Annotations.Designers.AnnPolylineEditDesigner); 
          automationObj.set_runDesignerType(lt.Annotations.Designers.AnnRunDesigner); 
 
          // Create the object template for it, use the default stroke 
          var lineObj = new lt.Annotations.Engine.AnnPolylineObject(); 
          automationObj.set_objectTemplate(lineObj); 
 
          // Add it to the automation objects of the manager 
          automationObjects.add(automationObj); 
 
          // Set up the rectangle automation object 
          automationObj = new lt.Annotations.Automation.AnnAutomationObject(); 
          automationObj.set_id(lt.Annotations.Engine.AnnObject.rectangleObjectId); 
          automationObj.set_name("Rectangle"); 
          automationObj.set_drawDesignerType(lt.Annotations.Designers.AnnRectangleDrawDesigner); 
          automationObj.set_editDesignerType(lt.Annotations.Designers.AnnRectangleEditDesigner); 
          automationObj.set_runDesignerType(lt.Annotations.Designers.AnnRunDesigner); 
 
          // Create the object template for it, use the default stroke and fill 
          var rectObj = new lt.Annotations.Engine.AnnRectangleObject(); 
          automationObj.set_objectTemplate(rectObj); 
 
          // Add it to the automation objects of the manager 
          automationObjects.add(automationObj); 
 
          automationObj = new lt.Annotations.Automation.AnnAutomationObject(); 
          automationObj.set_id(lt.Annotations.Engine.AnnObject.textObjectId); 
          automationObj.set_name("Text"); 
          automationObj.set_drawDesignerType(lt.Annotations.Designers.AnnRectangleDrawDesigner); 
          automationObj.set_editDesignerType(lt.Annotations.Designers.AnnTextEditDesigner); 
          automationObj.set_runDesignerType(lt.Annotations.Designers.AnnRunDesigner); 
 
          // Create the object template for it, use the default stroke, fill, text and font 
          var textObj = new lt.Annotations.Engine.AnnTextObject(); 
          automationObj.set_objectTemplate(textObj); 
 
          // Add it to the automation objects of the manager 
          automationObjects.add(automationObj); 
        }, 
 
        dispose: function SiteLibrary_DefaultPage$dispose() { 
        }, 
      } 
 
      DefaultPage.registerClass("DefaultPage", null, ss.IDisposable); 
      var page = null; 
      var windowLoad = null; 
      var windowUnload = null; 
      windowLoad = function (e) { 
        window.removeEventListener("load", windowLoad, false); 
        page = new DefaultPage(); 
        page.run(); 
        window.addEventListener("unload", windowUnload, false); 
      }; 
      windowUnload = function (e) { 
        window.removeEventListener("unload", windowUnload, false); 
        page.dispose(); 
      }; 
      window.addEventListener("load", windowLoad, false); 
    })(); 
  </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> 
</html> 
/// AnnAutomationManager.htm 
<!DOCTYPE html> 
<html> 
<head> 
  <title>Leadtools Examples</title> 
  <meta http-equiv="X-UA-Compatible" content="IE=9" /> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> 
  <meta name="apple-mobile-web-app-capable" content="yes" /> 
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
  <style> 
    #imageViewerDiv { 
      border: 1px solid #000000; 
      width: 800px; 
      height: 800px; 
      background-color: #7F7F7F; 
    } 
  </style> 
  <script src="libs/Leadtools.js"></script> 
  <script src="libs/Leadtools.Controls.js"></script> 
  <script src="libs/Leadtools.Annotations.Engine.js"></script> 
  <script src="libs/Leadtools.Annotations.Designers.js"></script> 
  <script src="libs/Leadtools.Annotations.Rendering.JavaScript.js"></script> 
  <script src="libs/Leadtools.Annotations.Automation.js"></script> 
  <script src="libs/Leadtools.Demos.js"></script> 
  <script src="libs/Leadtools.Demos.Annotations.js"></script> 
  <script src="AnnAutomationManager.js"></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> 
</html> 
/// AnnAutomationManager.ts 
class App { 
 
   protected _automation: lt.Annotations.Automation.AnnAutomation = 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); 
 
      this.run(); 
   } 
 
   private example(): void { 
      // TODO: add example code here 
      alert("example code goes here"); 
   } 
 
   private run(): 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; 
 
      // 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 only the line and rectangle automation objects 
      this.createMyAutomationObjects(manager); 
 
      // You can instruct the manager to create the default (all) automation objects. 
      // comment out the call to CreateMyAutomationObjects and call this instead: 
      //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: 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.addEventListener("click", (e) => { 
         this.example(); 
      }, false); 
   } 
 
   private createMyAutomationObjects(manager): void { 
      // Get the automation objects collection 
      const automationObjects = manager.objects; 
 
      // Set up the select automation object 
      const selectAutomationObj: lt.Annotations.Automation.AnnAutomationObject = new lt.Annotations.Automation.AnnAutomationObject(); 
      selectAutomationObj.id = lt.Annotations.Engine.AnnObject.selectObjectId; 
      selectAutomationObj.name = "Select"; 
      selectAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner; 
      selectAutomationObj.editDesignerType = lt.Annotations.Designers.AnnSelectionEditDesigner; 
      selectAutomationObj.runDesignerType = null; 
 
      // Create the object template for it 
      const selectObj: lt.Annotations.Engine.AnnSelectionObject = new lt.Annotations.Engine.AnnSelectionObject(); 
      selectObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("darkgreen"), lt.LeadLengthD.create(2)); 
      selectAutomationObj.objectTemplate = selectObj; 
 
      // Add it to the automation objects of the manager 
      automationObjects.add(selectAutomationObj); 
 
      // Set up the line automation object 
      const lineAutomationObj: lt.Annotations.Automation.AnnAutomationObject = new lt.Annotations.Automation.AnnAutomationObject(); 
      lineAutomationObj.id = lt.Annotations.Engine.AnnObject.lineObjectId; 
      lineAutomationObj.name = "Line"; 
      lineAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnLineDrawDesigner; 
      lineAutomationObj.editDesignerType = lt.Annotations.Designers.AnnPolylineEditDesigner; 
      lineAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner; 
 
      // Create the object template for it, use the default stroke 
      const lineObj: lt.Annotations.Engine.AnnPolylineObject = new lt.Annotations.Engine.AnnPolylineObject(); 
      lineAutomationObj.objectTemplate = lineObj; 
 
      // Add it to the automation objects of the manager 
      automationObjects.add(lineAutomationObj); 
 
      // Set up the rectangle automation object 
      const rectAutomationObj: lt.Annotations.Automation.AnnAutomationObject = new lt.Annotations.Automation.AnnAutomationObject(); 
      rectAutomationObj.id = lt.Annotations.Engine.AnnObject.rectangleObjectId; 
      rectAutomationObj.name = "Rectangle"; 
      rectAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner; 
      rectAutomationObj.editDesignerType = lt.Annotations.Designers.AnnRectangleEditDesigner; 
      rectAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner; 
 
      // Create the object template for it, use the default stroke and fill 
      const rectObj: lt.Annotations.Engine.AnnRectangleObject = new lt.Annotations.Engine.AnnRectangleObject(); 
      rectAutomationObj.set_objectTemplate(rectObj); 
 
      // Add it to the automation objects of the manager 
      automationObjects.add(rectAutomationObj); 
 
      const textAutomationObj: lt.Annotations.Automation.AnnAutomationObject = new lt.Annotations.Automation.AnnAutomationObject(); 
      textAutomationObj.id = lt.Annotations.Engine.AnnObject.textObjectId; 
      textAutomationObj.name = "Text"; 
      textAutomationObj.drawDesignerType = lt.Annotations.Designers.AnnRectangleDrawDesigner; 
      textAutomationObj.editDesignerType = lt.Annotations.Designers.AnnTextEditDesigner; 
      textAutomationObj.runDesignerType = lt.Annotations.Designers.AnnRunDesigner; 
 
      // Create the object template for it, use the default stroke, fill, text and font 
      const textObj: lt.Annotations.Engine.AnnTextObject = new lt.Annotations.Engine.AnnTextObject(); 
      textAutomationObj.objectTemplate = textObj; 
 
      // Add it to the automation objects of the manager 
      automationObjects.add(textAutomationObj); 
   } 
} 
 
window.onload = () => { 
   new App(); 
} 

Requirements

Target Platforms

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

Leadtools.Annotations.Automation Assembly