Working with Automated Annotations

Summary

Take the following steps to create an application that implements LEADTOOLS HTML5 automated annotations:

  1. Start with the html file you created in Displaying an Image.

  2. Add the following additional LEADTOOLS Annotation JavaScript libraries by adding the below script tags in the head section of your HTML after the previous LEADTOOLS libraries and copy the mentioned libs to the lib folder we created in Displaying an Image:

    JavaScript
    <script type="text/javascript" src="lib/Leadtools.Annotations.Engine.js"></script> 
    <script type="text/javascript" src="lib/Leadtools.Annotations.Rendering.JavaScript.js"></script> 
    <script type="text/javascript" src="lib/Leadtools.Annotations.Designers.js"></script> 
    <script type="text/javascript" src="lib/Leadtools.Annotations.Automation.js"></script> 
    <script type="text/javascript" src="lib/Leadtools.Demos.Annotations.js"></script> 

  3. If you do not find library (Leadtools.Demos.Annotations.js), you can build it yourself. It comes from a demo included within the setup examples and is located here: "<LEADTOOLS_INSTALLDIR>\Examples\JS\Annotations\Leadtools.Demos.Annotations"

  4. The annotation framework allows the user to define the images which are used for various annotations (stamps, point, lock, and hotspot). A default set of images for these objects is included with the toolkit. For this tutorial, we will use these default images. In order to make these objects available to your application, copy the "<LEADTOOLS_INSTALLDIR>\Examples\JS\Documents\Resources" directory to the same directory as your HTML file.

  5. Add two select elements to your page by inserting the below code in the body section of your HTML before the image viewer DIV. These elements will be used to select the current user-mode, and the various types of annotation objects.

    JavaScript
    <label for="currentObject">Annotation Object:</label> 
    <select id="currentObject"></select> 
    <label for="userMode">User mode:</label> 
    <select id="userMode"> 
       <option>Design</option> 
       <option>Run</option> 
    </select> 

  6. Update app.js with the following code. This code will set up the automation manager and automation object for the application.

    JavaScript
    window.onload = function () {  
       // Get the container DIV  
       var imageViewerDiv = document.getElementById("imageViewerDiv");  
       // Create the image viewer inside it  
       var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);  
       var imageViewer = new lt.Controls.ImageViewer(createOptions);  
       // Add handler to show an alert on errors  
       imageViewer.itemError.add(function (sender, e) {  
          alert("Error loading " + e.data.srcElement.src);  
       });  
       imageViewer.imageUrl = "https://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 the default annotations objects   
       manager.createDefaultObjects();  
                      
       var currentObject = document.getElementById("currentObject");  
                      
       var automationObjCount = manager.objects.count;  
       for (var i = 0; i < automationObjCount; i++) {  
          // Get the object   
          var automationObj = manager.objects.item(i);  
                      
          // Add its name to the select element   
          var name = automationObj.name;  
          var id = automationObj.id;  
          currentObject.options[currentObject.options.length] = new Option(name, id);  
       }  
                      
       // Hook to its change event  
       currentObject.addEventListener("change", function () {  
          // Get the object ID  
          var id = parseInt(currentObject.options[currentObject.selectedIndex].value);  
                      
          // Set it as the current object in the manager   
          manager.currentObjectId = id;  
       });  
                      
       // When the current object ID changes, we need to update our select  
       manager.currentObjectIdChanged.add(function (sender, e) {  
          var currentObjectId = manager.currentObjectId;  
          for (var i = 0; i < currentObject.options.length; i++) {  
             var id = parseInt(currentObject.options[i].value);  
             if (id === currentObjectId) {  
                currentObject.selectedIndex = i;  
                break;  
             }  
          }  
       });  
                      
       var userMode = document.getElementById("userMode");  
       // Hook to its change event   
       userMode.addEventListener("change", function () {  
          // Get the selected mode   
          var mode = userMode.options[userMode.selectedIndex].innerHTML;  
          if (mode == "Design") {  
             manager.userMode = lt.Annotations.Engine.AnnUserMode.design;  
          } else {  
             manager.userMode = lt.Annotations.Engine.AnnUserMode.run;  
          }  
       });  
                      
       // Create an instance of the Automation control object that works with LEADTOOLS ImageViewer  
       var automationControl = new lt.Demos.Annotations.ImageViewerAutomationControl();  
       // Attach our image viewer  
       automationControl.imageViewer = imageViewer;  
                      
       // Set the image viewer interactive mode   
       var automationInteractiveMode = new lt.Demos.Annotations.AutomationInteractiveMode();  
       automationInteractiveMode.automationControl = automationControl;  
       imageViewer.defaultInteractiveMode = automationInteractiveMode;  
                      
       // set up the automation (will create the container as well)  
       var automation = new lt.Annotations.Automation.AnnAutomation(manager, automationControl);  
       // Add handler to update the container size when the image size changes  
       imageViewer.itemChanged.add(function (sender, e) {  
          var container = automation.container;  
          container.size = container.mapper.sizeToContainerCoordinates(imageViewer.imageSize);  
       });  
                      
       // set up this automation as the active one  
       automation.active = true;  
                      
       // Hook to the run even so we know when an object enters run mode   
       automation.run.add(function (sender, e) {  
          // e is of type AnnRunDesignerEventArgs   
          if (e.operationStatus == lt.Annotations.Engine.AnnDesignerOperationStatus.start) {  
             // Get the object being run   
             alert("In run mode, you clicked an object of id " + e.object.id);  
          }  
       });  
                      
       // Optional: Add the resources to the automation manager  
       addResources(manager);  
    }  
                       
    function addResources(manager) {  
       // Add images for the stamp, point, hot spot, and lock annotations  
       var resources = new lt.Annotations.Engine.AnnResources(); 
       manager.resources = resources;  
       var rubberStampsResources = resources.rubberStamps;  
       var imagesResources = resources.images;  
                      
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampApproved] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/approved.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampAssigned] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Assigned.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampClient] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Client.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampChecked] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/checked.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampCopy] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Copy.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampDraft] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Draft.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampExtended] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Extended.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampFax] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Fax.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampFaxed] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Faxed.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampImportant] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Important.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampInvoice] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Invoice.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampNotice] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Notice.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampPaid] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Paid.png");  
                      
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampOfficial] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Official.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampOnFile] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Onfile.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampPassed] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Passed.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampPending] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Pending.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampProcessed] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Processed.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampReceived] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Received.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampRejected] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/rejected.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampRelease] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Release.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampSent] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Sent.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampShipped] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/Shipped.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampTopSecret] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/topsecret.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampUrgent] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/urgent.png");  
       rubberStampsResources[lt.Annotations.Engine.AnnRubberStampType.stampVoid] = new lt.Annotations.Engine.AnnPicture("resources/objects/RubberStamps/void.png");  
                      
       imagesResources.add(new lt.Annotations.Engine.AnnPicture("resources/objects/Point.png")); 
       imagesResources.add(new lt.Annotations.Engine.AnnPicture("resources/objects/lock.png")); 
       imagesResources.add(new lt.Annotations.Engine.AnnPicture("resources/objects/hotspot.png"));  
    }  

  7. Launch the page in a browser that supports HTML5 to test it. While in design mode, you can select various annotation objects and draw them over the image. When an object is clicked in run mode, an alert is shown indicating which object was clicked. Your application can handle how annotations behave in run mode by handling the automation run event.
Help Version 20.0.2020.4.3
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2020 LEAD Technologies, Inc. All Rights Reserved.

LEADTOOLS HTML5 JavaScript