LEADTOOLS JavaScript (Leadtools.Annotations.Automation)
LEAD Technologies, Inc

AnnAutomationManager Object

Example 
Members 
Manages the automation mode for an annotation application.
Object Model
AnnAutomationManager ObjectAnnAutomations ObjectAnnAutomationObjects Object
Syntax
function Leadtools.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

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

To run this example take the following steps:

  1. Copy and paste this example into your favorite text editor and save it as an html file with any name, such as Default.htm, to a folder on your disk.
  2. Inside that folder containing the new html file, create a directory with the name "Scripts".
  3. Copy the required .js files in the example from "LEADTOOLS Installation Folder\Bin\JS" to "Scripts".
  4. Finally, open the HTML file in any browser that supports HTML 5.
<!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 type="text/javascript" src="Scripts/Leadtools.js"></script>
   <script type="text/javascript" src="Scripts/Leadtools.Controls.js"></script>
   <script type="text/javascript" src="Scripts/Leadtools.Annotations.Core.js"></script>
   <script type="text/javascript" src="Scripts/Leadtools.Annotations.Rendering.js"></script>
   <script type="text/javascript" src="Scripts/Leadtools.Annotations.Designers.js"></script>
   <script type="text/javascript" src="Scripts/Leadtools.Annotations.Automation.js"></script>
   <script type="text/javascript">
      (function () {
         DefaultPage = function DefaultPage() {
         }

         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 createOptions = new Leadtools.Controls.ImageViewerCreateOptions("imageViewerDiv", "myViewer");
               var viewer = new Leadtools.Controls.ImageViewer(createOptions);

               // PanZoom interactive mode
               var panZoom = new Leadtools.Controls.ImageViewerPanZoomInteractiveMode();

               // Create an instance of the Automation control object that works with LEADTOOLS ImageViewer
               // This is also an interactive mode that we need to use
               var imageViewerAutomationControl = new Leadtools.Annotations.Automation.ImageViewerAutomationControl(viewer);

               // Set the image URL
               viewer.set_imageUrl("Images/Document.jpg");

               // create and set up the automation manager
               var manager = new Leadtools.Annotations.Automation.AnnAutomationManager();

               // 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", Leadtools.Annotations.Core.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 == Leadtools.Annotations.Core.AnnObject.none) {
                     viewer.set_defaultInteractiveMode(panZoom);
                  }
                  else {
                     viewer.set_defaultInteractiveMode(imageViewerAutomationControl);
                  }
               });

               // 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)
               this._automation = new Leadtools.Annotations.Automation.AnnAutomation(manager, imageViewerAutomationControl);

               // 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 Leadtools.Annotations.Automation.AnnAutomationObject();
               automationObj.set_id(Leadtools.Annotations.Core.AnnObject.selectObjectId);
               automationObj.set_name("Select");
               automationObj.set_drawDesignerType(Leadtools.Annotations.Designers.AnnRectangleDrawDesigner);
               automationObj.set_editDesignerType(Leadtools.Annotations.Designers.AnnSelectionEditDesigner);
               automationObj.set_runDesignerType(null);

               // Create the object template for it
               var selectObj = new Leadtools.Annotations.Core.AnnSelectionObject();
               selectObj.set_stroke(Leadtools.Annotations.Core.AnnStroke.create(Leadtools.Annotations.Core.AnnSolidColorBrush.create("darkgreen"), Leadtools.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 Leadtools.Annotations.Automation.AnnAutomationObject();
               automationObj.set_id(Leadtools.Annotations.Core.AnnObject.lineObjectId);
               automationObj.set_name("Line");
               automationObj.set_drawDesignerType(Leadtools.Annotations.Designers.AnnLineDrawDesigner);
               automationObj.set_editDesignerType(Leadtools.Annotations.Designers.AnnPolylineEditDesigner);
               automationObj.set_runDesignerType(Leadtools.Annotations.Designers.AnnRunDesigner);

               // Create the object template for it, use the default stroke
               var lineObj = new Leadtools.Annotations.Core.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 Leadtools.Annotations.Automation.AnnAutomationObject();
               automationObj.set_id(Leadtools.Annotations.Core.AnnObject.rectangleObjectId);
               automationObj.set_name("Rectangle");
               automationObj.set_drawDesignerType(Leadtools.Annotations.Designers.AnnRectangleDrawDesigner);
               automationObj.set_editDesignerType(Leadtools.Annotations.Designers.AnnRectangleEditDesigner);
               automationObj.set_runDesignerType(Leadtools.Annotations.Designers.AnnRunDesigner);

               // Create the object template for it, use the default stroke and fill
               var rectObj = new Leadtools.Annotations.Core.AnnRectangleObject();
               automationObj.set_objectTemplate(rectObj);

               // Add it to the automation objects of the manager
               automationObjects.add(automationObj);

               automationObj = new Leadtools.Annotations.Automation.AnnAutomationObject();
               automationObj.set_id(Leadtools.Annotations.Core.AnnObject.textObjectId);
               automationObj.set_name("Text");
               automationObj.set_drawDesignerType(Leadtools.Annotations.Designers.AnnRectangleDrawDesigner);
               automationObj.set_editDesignerType(Leadtools.Annotations.Designers.AnnTextEditDesigner);
               automationObj.set_runDesignerType(Leadtools.Annotations.Designers.AnnRunDesigner);

               // Create the object template for it, use the default stroke, fill, text and font
               var textObj = new Leadtools.Annotations.Core.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>
See Also

Reference

AnnAutomationManager Members
Leadtools.Annotations.Automation Namespace
Implementing LEADTOOLS Annotations

 

 


Products | Support | Contact Us | Copyright Notices

© 2006-2012 All Rights Reserved. LEAD Technologies, Inc.