Welcome Guest! To enable all features, please Login or Register.

Notification

Icon
Error

Options
View
Last Go to last post Unread Go to first unread post
#1 Posted : Thursday, February 23, 2017 9:57:59 AM(UTC)

maneka  
maneka

Groups: Registered
Posts: 17

Thanks: 1 times

hi I am trying to run the code in the following example https://www.leadtools.co...leadtoolsjavascript.html
however I can only draw the first time and the code dosen't draw again.

Is there a step by step tutorial explaining how to attach an annotation tool to a button

thank you

 

Try the latest version of LEADTOOLS for free for 60 days by downloading the evaluation: https://www.leadtools.com/downloads

Wanna join the discussion? Login to your LEADTOOLS Support accountor Register a new forum account.

#2 Posted : Friday, February 24, 2017 4:32:12 PM(UTC)
Nick Villalobos

Groups: Registered, Manager, Tech Support, Administrators
Posts: 117

Was thanked: 4 time(s) in 4 post(s)

Hey Maneka,

After looking over the tutorial, I was also able to reproduce what you had mentioned regarding only being able to draw one annotation at a time then having to select the option again. The reason this is occurring is because by default, manager.editTextAfterDraw is set to true. What you will need to do is add manager.editTextAfterDraw = false; right after you create the default annotations objects. So now the tutorial code should look something like this:

Code:

 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 = "cannon.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();
                manager.editObjectAfterDraw = false;
            
                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.Core.AnnUserMode.design;
                   } else {
                      manager.userMode = lt.Annotations.Core.AnnUserMode.run;
                   }
                });
            
                // Create an instance of the Automation control object that works with LEADTOOLS ImageViewer
                var automationControl = new lt.Annotations.JavaScript.ImageViewerAutomationControl();
                // Attach our image viewer
                automationControl.imageViewer = imageViewer;
            
                // Set the image viewer interactive mode 
                var automationInteractiveMode = new lt.Annotations.JavaScript.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.Core.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 container
                addResources(automation.container);
             }
             
             function addResources(container) {
                // Add images for the stamp, point, hot spot, and lock annotations
                var resources = new lt.Annotations.Core.AnnResources();
                container.resources = resources;
                var rubberStampsResources = resources.rubberStamps;
                var imagesResources = resources.images;
            
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampApproved] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/approved.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampAssigned] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Assigned.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampClient] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Client.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampChecked] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/checked.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampCopy] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Copy.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampDraft] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Draft.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampExtended] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Extended.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampFax] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Fax.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampFaxed] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Faxed.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampImportant] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Important.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampInvoice] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Invoice.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampNotice] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Notice.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampPaid] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Paid.png");
            
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampOfficial] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Official.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampOnFile] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Onfile.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampPassed] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Passed.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampPending] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Pending.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampProcessed] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Processed.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampReceived] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Received.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampRejected] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/rejected.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampRelease] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Release.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampSent] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Sent.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampShipped] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/Shipped.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampTopSecret] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/topsecret.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampUrgent] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/urgent.png");
                rubberStampsResources[lt.Annotations.Core.AnnRubberStampType.stampVoid] = new lt.Annotations.Core.AnnPicture("resources/objects/RubberStamps/void.png");
            
                imagesResources.add(new lt.Annotations.Core.AnnPicture("resources/objects/Point.png"));
                imagesResources.add(new lt.Annotations.Core.AnnPicture("resources/objects/lock.png"));
                imagesResources.add(new lt.Annotations.Core.AnnPicture("resources/objects/hotspot.png"));
             }
Nick Villalobos
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
thanks 1 user thanked Nick Villalobos for this useful post.
Roberto on 2/24/2017(UTC)
 
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Powered by YAF.NET | YAF.NET © 2003-2019, Yet Another Forum.NET
This page was generated in 0.124 seconds.