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 : Wednesday, November 1, 2017 10:47:34 AM(UTC)

Jay911  
Jay911

Groups: Registered
Posts: 27

Thanks: 12 times

I have following code, but it doesn't seem to work. Any help would be really appreciated.

Code:

window.onload = function () {
var imageViewerDiv = document.getElementById("imageViewerDiv");
var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
var imageViewer = new lt.Controls.ImageViewer(createOptions);
imageViewer.imageUrl = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";

imageViewer.itemError.add(function (sender, e) { 
      alert("Error loading " + e.data.srcElement.src); 
   }); 



// 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();
//Gets or sets a value that indicates whether new drawn objects are selected (edited).
manager.editObjectAfterDraw = false;

// 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 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);
   manager.currentObjectId = lt.Annotations.Core.AnnObject.freehandObjectId;
});
// set up this automation as the active one 
automation.active = true;

// assumes _automation is valid 
   var inch = 720.0; 
   // Add a hilite object 
   var hiliteObj = new lt.Annotations.Core.AnnHiliteObject(); 
   // Set the points for the hilite 
   hiliteObj.get_points().add(lt.LeadPointD.create(1 * inch, 1 * inch)); 
   hiliteObj.get_points().add(lt.LeadPointD.create(2 * inch, 1 * inch)); 
   hiliteObj.get_points().add(lt.LeadPointD.create(2 * inch, 2 * inch)); 
   hiliteObj.get_points().add(lt.LeadPointD.create(1 * inch, 2 * inch)); 
   // Add the object to the automation container 
   automation._automation.get_container().get_children().add(hiliteObj); 
   // Select the object 
   automation._automation.selectObject(hiliteObj); 
}

Edited by moderator Monday, December 4, 2017 1:29:22 PM(UTC)  | Reason: Added code formatting

 

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 : Wednesday, November 1, 2017 1:03:45 PM(UTC)
Anthony Northrup

Groups: Registered, Tech Support, Administrators
Posts: 199

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

Hello Jay,

You’re code was almost correct. You’re code looks like the following tutorial: https://www.leadtools.com/help/leadtools/v19/dh/javascript/to/workingwithautomatedannotations.html, so I tested using this code. If you just change the last two lines of your code snippet to be the following, it should work.

Code:

// Change automation._automation.** to automation.**
automation.get_container().get_children().add(hiliteObj);
automation.selectObject(hiliteObj);


You don’t need to access a “_automation” property on the automation object, just access the methods directly.
Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
thanks 1 user thanked Anthony Northrup for this useful post.
Jay911 on 11/1/2017(UTC)
 
#3 Posted : Friday, November 3, 2017 9:43:28 AM(UTC)

Jay911  
Jay911

Groups: Registered
Posts: 27

Thanks: 12 times

Hi Anthony,

Is it possible to add points by pixel unit? I try to draw the highlight over image by given coordinates in pixel.

I have following code to draw highlight, but the result (location and size) is off in contrast to the one I manually drew in Microsoft paint
hiliteObj.get_points().add(lt.LeadPointD.create(100, 300));
hiliteObj.get_points().add(lt.LeadPointD.create(100, 600));
hiliteObj.get_points().add(lt.LeadPointD.create(500, 600));
hiliteObj.get_points().add(lt.LeadPointD.create(500, 300));



Thanks in advance.
 
#4 Posted : Friday, November 3, 2017 11:43:58 AM(UTC)
Anthony Northrup

Groups: Registered, Tech Support, Administrators
Posts: 199

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

Hello Jay,

You just need to map your pixel position to be in annotation coordinates instead. Below is your code modified to use pixels instead.

Code:

// assumes _automation is valid
var rect = lt.LeadRectD.create(100, 100, 100, 100);
rect = imageViewer.convertRect(null, lt.Controls.ImageViewerCoordinateType.content, lt.Controls.ImageViewerCoordinateType.control, rect); // Might be optional, showed same result without
rect = automation.activeContainer.mapper.rectToContainerCoordinates(rect);
// Add a hilite object
var hiliteObj = new lt.Annotations.Core.AnnHiliteObject();
// Set the points for the hilite
hiliteObj.get_points().add(lt.LeadPointD.create(rect.left, rect.top));
hiliteObj.get_points().add(lt.LeadPointD.create(rect.right, rect.top));
hiliteObj.get_points().add(lt.LeadPointD.create(rect.right, rect.bottom));
hiliteObj.get_points().add(lt.LeadPointD.create(rect.left, rect.bottom));
// Add the object to the automation container
automation.get_container().get_children().add(hiliteObj);
// Select the object
automation.selectObject(hiliteObj);
Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
thanks 1 user thanked Anthony Northrup for this useful post.
Jay911 on 11/3/2017(UTC)
 
#5 Posted : Tuesday, November 21, 2017 10:06:55 AM(UTC)

Jay911  
Jay911

Groups: Registered
Posts: 27

Thanks: 12 times

Hi Anthony,

I have switched from Html5 ImageViewer to DocumentViewer. I use the same logic but the result isn't accurate and the drew annotation shows will show in any active items when active item changed. It doesn't scroll with page.
Can you help me out? Thanks in advance.

Code:

var imageViewer;
var imageVieweritem;
var automation;
var highlightObj;

function loadDocumentViewer() {
    // Create the options object for the DocumentViewer
    var createOptions = new lt.Documents.UI.DocumentViewerCreateOptions();
    // We will choose to use Elements Mode for this example, but you can disable it
    // Elements Mode can be styled with CSS - see the HTML for information
    createOptions.viewCreateOptions.useElements = true;
    createOptions.thumbnailsCreateOptions.useElements = true;
    // Set thumbnailsContainer to #thumbnails
    createOptions.thumbnailsContainer = document.getElementById("thumbnails");
    // Set viewContainer to #documentViewer
    createOptions.viewContainer = document.getElementById("documentViewer");
    // Create the document viewer
    _this.documentViewer = lt.Documents.UI.DocumentViewerFactory.createDocumentViewer(createOptions);
    // Set interactive mode to Pan / Zoom
    _this.documentViewer.commands.run(lt.Documents.UI.DocumentViewerCommands.interactivePanZoom);
    // We prefer SVG viewing over Image viewing for this example
    _this.documentViewer.view.preferredItemType = lt.Documents.UI.DocumentViewerItemType.svg;
    // To use Image: lt.Documents.UI.DocumentViewerItemType.image;
    // Change our thumbnails to be centered horizontally in the provided container
    _this.documentViewer.thumbnails.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;
    // Before we call the service, we need to explain where it is ("localhost:19000/api", for example):
    lt.Documents.DocumentFactory.serviceHost = docServiceSettingObj.serviceHost; // or wherever your host is
    lt.Documents.DocumentFactory.servicePath = docServiceSettingObj.servicePath; // the path to the root of the service, which is nothing for this example
    lt.Documents.DocumentFactory.serviceApiPath = docServiceSettingObj.serviceApiPath; // Routing occurs at "/api", unless you change the routing in the DocumentsService
    /* A quick example with a different service location:
     * > client: http://localhost:123
     * > service: https://www.leadtools.com/path/to/service
     * > service routing namespace: /api
     *
     * Set these properties with these values:
     * serviceHost = "https://www.leadtools.com";
     * servicePath = "path/to/service";
     * serviceApiPath = "api"
     */
    // Load a PDF document
    
  
    //var url = "https://spdocservice.itsp-inc.com:843/Samples/BostonPermit.tif";
    var loadDocumentOptions = new lt.Documents.LoadDocumentOptions(); 
   
    
    console.log(loadDocumentOptions);
    debugger;
    // Call the "LoadFromUri" and pass success and failure callbacks to the promise
    lt.Documents.DocumentFactory.loadFromUri(docServiceSettingObj.documentImageURL,loadDocumentOptions)
        .done(function (documentData) {
        // Set the document in the viewer
        _this.documentViewer.setDocument(documentData);
        imageViewer = _this.documentViewer.view.imageViewer;


        /*****annotation******/
    renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
    manager = new lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine);
    automationControl = new lt.Annotations.JavaScript.ImageViewerAutomationControl();
    // Create the default annotations objects  
    manager.createDefaultObjects();
    //Gets or sets a value that indicates whether new drawn objects are selected (edited).
    manager.editObjectAfterDraw = false;
      // Attach our image viewer 
    automationControl.imageViewer = imageViewer;
     // set up the automation (will create the container as well) 
    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) {
       debugger;
       var container = automation.container;
       container.size = container.mapper.sizeToContainerCoordinates(imageViewer.imageSize);
       manager.currentObjectId = lt.Annotations.Core.AnnObject.freehandObjectId;
    });*/
    // set up this automation as the active one 
    automation.active = true;
    for(var counter =0;counter<documentData.pages.count;counter++){
      var containerVar = new lt.Annotations.Core.AnnContainer();
      containerVar.size = containerVar.mapper.sizeToContainerCoordinates(imageViewer.items.item(counter).imageSize);
      automation.containers.add(containerVar);
    }



        // Hook to the ActiveItemChanged event and update the label 
        imageViewer.activeItemChanged.add(function(sender, e) { 
           var index = imageViewer.items.indexOf(imageViewer.activeItem); 
           //infoLabel.textContent = "ActiveIndex index is " + index.toString(); 
           console.log("imageViewer.activeItemChanged");
           updatePageNavigationControl(index);
           //automation.containers.get_item(index).isVisible = true;
           for (var i = 0; i < documentData.pages.count; i++) {
              if (i == index) {
                 automation.containers.get_item(i).isVisible = true;
              }
              else {
                 automation.containers.get_item(i).isVisible = false;
              }
           }

        }); 
        //set first page as active item
        imageViewer.set_activeItem(imageViewer.items.item(0));
        imageViewer.gotoItemByIndex(0);
        console.log("lt.Documents.DocumentFactory.loadFromUri");
        updatePageNavigationControl(0);
        initRoationObj();
        documentRotationObj["DocumentLocation"]=docServiceSettingObj.userData["filePath"];
        documentRotationObj["token"]=docServiceSettingObj.userData["token"];

        console.log("Document was loaded succesfully"); 
          console.log("MIMEType is " + documentData.mimeType); 
          console.log("Number of Pages is " + documentData.pages.count); 
          // Show the PDF image of the first page in a new tab 
          //var docPage = document.pages.item(0); 
          //var pageSvg = docPage.getSvgUrl(lt.Documents.DocumentGetSvgOptions.none); 
          //window.open(pageSvg); 

    })
        .fail(function (jqXHR, statusText, errorThrown) {
        // Get more information from LEADTOOLS
        var serviceError = lt.Documents.ServiceError.parseError(jqXHR, statusText, errorThrown);
        console.log(serviceError);
        // Show an alert about what the issue is
        var lines = [];
        lines.push("Document Viewer Error:");
        lines.push(serviceError.message);
        lines.push(serviceError.detail);
        lines.push("See console for details.");
        alert(lines.join("\n"));
    });   
};


function addHighlight(pageNumber,left,top,right,bottom){
  
    imageViewer.set_activeItem(imageViewer.items.item(pageNumber-1));
    //automation.containers.get_item(i)
    var x = Number(left);
    var y = Number(top);
    var width = right - left;
    var height = bottom - top;
    var rect = lt.LeadRectD.create(x, y, width, height);
    rect = imageViewer.convertRect(imageViewer.items.item(pageNumber-1), lt.Controls.ImageViewerCoordinateType.content, lt.Controls.ImageViewerCoordinateType.control, rect); // Might be optional, showed same result without
    //rect = automation.activeContainer.mapper.rectToContainerCoordinates(rect);
    rect = automation.containers.get_item(pageNumber-1).mapper.rectToContainerCoordinates(rect);
    // Add a hilite object
    highlightObj = new lt.Annotations.Core.AnnHiliteObject();
    highlightObj.fixedStateOperations = lt.Annotations.Core.AnnFixedStateOperations.none;
    console.log("hiobj1.hiliteColor");
    console.log(highlightObj.hiliteColor);
    highlightObj.hiliteColor = ZoneColor;
    highlightObj.opacity =ZoneOpacity;
    // Set the points for the zoning highlight
    highlightObj.get_points().add(lt.LeadPointD.create(rect.left, rect.top));
    highlightObj.get_points().add(lt.LeadPointD.create(rect.right, rect.top));
    highlightObj.get_points().add(lt.LeadPointD.create(rect.right, rect.bottom));
    highlightObj.get_points().add(lt.LeadPointD.create(rect.left, rect.bottom));
    // Add the object to the automation container
    //automation.get_container().get_children().add(highlightObj);
    automation.containers.get_item(pageNumber-1).get_children().add(highlightObj);
    //automation.containers.get_item(pageNumber-1).get_children().add(highlightObj);
    automation.selectObject(null);

   console.log("hiobj1");
   console.log(highlightObj);


}

Edited by moderator Monday, December 4, 2017 1:28:32 PM(UTC)  | Reason: Added code formatting

 
#6 Posted : Tuesday, November 21, 2017 3:28:00 PM(UTC)
Anthony Northrup

Groups: Registered, Tech Support, Administrators
Posts: 199

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

Hello Jay,

To solve this, simply set the MultiContainerMode of the AutomationControl. You can even remove the code for controlling the container's visibility in the event handler you've set up for the ActiveItemChanged event since they will now scroll with the items.

Code:

automationControl.multiContainerMode = lt.Annotations.JavaScript.AutomationControlMultiContainerMode.MultiPage;
Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
thanks 1 user thanked Anthony Northrup for this useful post.
Jay911 on 11/21/2017(UTC)
 
#7 Posted : Tuesday, November 21, 2017 4:07:45 PM(UTC)

Jay911  
Jay911

Groups: Registered
Posts: 27

Thanks: 12 times

Thank a lot. I have been looking all the documentation for this multiContainerMode.

But the result of highlighted area (location and size) is still off in contrast to the one I manually drew in Microsoft paint. Did I map it correctly?
The location and size was accurate when you helped me for HTML5 Image Viewer. Not sure what happened here for document viewer.
 
#8 Posted : Tuesday, November 21, 2017 4:30:00 PM(UTC)
Anthony Northrup

Groups: Registered, Tech Support, Administrators
Posts: 199

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

Hello Jay,

That functionality is undocumented on our site since it's part of the Leadtools.Annotations.JavaScript assembly, you can find the source for this in the SDK installation:
[LEADTOOLS 19]\Examples\JS\Leadtools.Annotations.JavaScript\

I recommend trying convertRect from image to control instead of content to control like I originally sent you, that might change the position to what you're expecting.
Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
 
#9 Posted : Tuesday, November 21, 2017 4:43:27 PM(UTC)

Jay911  
Jay911

Groups: Registered
Posts: 27

Thanks: 12 times

Originally Posted by: Anthony Northrup Go to Quoted Post
Hello Jay,

That functionality is undocumented on our site since it's part of the Leadtools.Annotations.JavaScript assembly, you can find the source for this in the SDK installation:
[LEADTOOLS 19]\Examples\JS\Leadtools.Annotations.JavaScript\

I recommend trying convertRect from image to control instead of content to control like I originally sent you, that might change the position to what you're expecting.



I am a bit lost on "convertRect from image to control". Can you give a little bit more detail? Thanks a lot.


 
#10 Posted : Tuesday, November 21, 2017 5:44:51 PM(UTC)
Anthony Northrup

Groups: Registered, Tech Support, Administrators
Posts: 199

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

Hello Jay,

Sorry for being somewhat vague. In the code there is the line that says:
Code:

rect = imageViewer.convertRect(imageViewer.items.item(pageNumber - 1), lt.Controls.ImageViewerCoordinateType.content, lt.Controls.ImageViewerCoordinateType.control, rect); // Might be optional, showed same result without

Try changing it to:
Code:

rect = imageViewer.convertRect(imageViewer.items.item(pageNumber - 1), lt.Controls.ImageViewerCoordinateType.image, lt.Controls.ImageViewerCoordinateType.control, rect); // Might be optional, showed same result without

Note: The second argument was changed from content to image
Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
thanks 1 user thanked Anthony Northrup for this useful post.
Jay911 on 11/21/2017(UTC)
 
#11 Posted : Tuesday, November 21, 2017 5:53:22 PM(UTC)

Jay911  
Jay911

Groups: Registered
Posts: 27

Thanks: 12 times

Thank you so much, Anthony! It works perfect now.
 
#12 Posted : Monday, December 4, 2017 1:08:07 PM(UTC)

Jay911  
Jay911

Groups: Registered
Posts: 27

Thanks: 12 times

Hi Anthony,

Sorry to bother you again.
I use the code above you give it to me. I work perfectly, but I want to zoom to rect that is drawn on document viewer image.
I use below code. It doesn't seem to work properly.
imageViewer.zoomToRect(rect);

Thank in advance!
 
#13 Posted : Monday, December 4, 2017 1:23:44 PM(UTC)
Anthony Northrup

Groups: Registered, Tech Support, Administrators
Posts: 199

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

Hello Jay,

When you say "drawn on document viewer image" are you referring to an annotation? Annotation coordinates are different than the coordinates used by the Image Viewer. You'll note in the code you're working with, rect has been converted from Image coordinates to Control coordinates and finally to Annotation coordinates. In order to zoom in on the rectangle, you will need to convert back to Image coordinates, then call the zoomToRect method. You should be able to use the code below to do this.

Code:

var zoomRect = automation.containers.get_item(pageNumber-1).mapper.rectFromContainerCoordinates(rect);
zoomRect = imageViewer.convertRect(imageViewer.items.item(pageNumber - 1), lt.Controls.ImageViewerCoordinateType.control, lt.Controls.ImageViewerCoordinateType.image, zoomRect);
imageViewer.zoomToRect(zoomRect);
Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
 
#14 Posted : Monday, December 4, 2017 2:07:03 PM(UTC)

Jay911  
Jay911

Groups: Registered
Posts: 27

Thanks: 12 times

Thanks. Yeah it is annotation.
I just tried your code. it doesn't seem to work.

It still scroll all the way to bottom.


see image below
Capture.PNG
 
#15 Posted : Monday, December 4, 2017 2:24:07 PM(UTC)
Anthony Northrup

Groups: Registered, Tech Support, Administrators
Posts: 199

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

Hello Jay,

It appears the zoomToRect method takes Control coordinates, rather than Image coordinates. You can simply remove the second line. I tested this with the code you sent previously and it works.

Code:

var zoomRect = automation.containers.get_item(pageNumber - 1).mapper.rectFromContainerCoordinates(rect);
imageViewer.zoomToRect(zoomRect);
Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
thanks 1 user thanked Anthony Northrup for this useful post.
Jay911 on 12/4/2017(UTC)
 
#16 Posted : Monday, December 4, 2017 2:36:40 PM(UTC)

Jay911  
Jay911

Groups: Registered
Posts: 27

Thanks: 12 times

Thanks a lot. Just one more question. I want to scroll to specific point at specific page. Do I have to convert the unit too?

Below is the code I have. It doesn't seem to scroll to correct position of image.

var ld = lt.LeadPointD.create(pointX, pointY);
imageViewer.set_activeItem(imageViewer.items.item(pageNumber-1));
imageViewer.gotoItemByIndex(pageNumber-1);
imageViewer.scrollBy(ld);
 
#17 Posted : Monday, December 4, 2017 5:12:37 PM(UTC)
Anthony Northrup

Groups: Registered, Tech Support, Administrators
Posts: 199

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

Hello Jay,

What are the point coordinates from? You will need to get the scroll offset after moving the view around (after gotoItemByIndex). Below is the code I tested using the examples from earlier (I disabled imageViewer.zoomToRect(zoomRect); for testing).

Code:

imageViewer.set_activeItem(imageViewer.items.item(pageNumber-1));
imageViewer.gotoItemByIndex(pageNumber-1);
var scrollRect = automation.containers.get_item(pageNumber - 1).mapper.rectFromContainerCoordinates(rect); // rect from hilite annotation
var ld = lt.LeadPointD.create(scrollRect.x, scrollRect.y);
imageViewer.scrollBy(ld);

If you are getting the point from an annotation, you can use the following:

Code:

imageViewer.set_activeItem(imageViewer.items.item(pageNumber-1));
imageViewer.gotoItemByIndex(pageNumber-1);
var ld = automation.containers.get_item(pageNumber - 1).mapper.pointFromContainerCoordinates(lt.LeadPointD.create(pointX, pointY));
imageViewer.scrollBy(ld);
Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
thanks 1 user thanked Anthony Northrup for this useful post.
Jay911 on 12/29/2017(UTC)
 
#18 Posted : Friday, December 29, 2017 2:27:18 PM(UTC)

Jay911  
Jay911

Groups: Registered
Posts: 27

Thanks: 12 times

Hi Anthony,

Thanks for all the help. Everything is fine now. Only one problem left. The document get clipped off when I resize and maximize the browser (see image below).
Any advice? Thanks.

resize problem.PNG
 
#19 Posted : Wednesday, January 3, 2018 8:05:04 AM(UTC)
Anthony Northrup

Groups: Registered, Tech Support, Administrators
Posts: 199

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

Hello Jay,

Sorry for the delayed response, I didn't see your message Friday and was out on holiday the 1st and 2nd. To answer your question, you will need to resize the image viewer when you change the window size (maximizing or otherwise). If you do this via CSS, it should automatically resize the image viewer, but if it doesn't (or you are resizing manually from the window resize event, or other method) you can call the onSizeChanged method. There is more information on the documentation page. If this doesn't work, or you are still having issues, let me know how you are sizing the image viewer (attaching relevant CSS or JS) and I'll replicate it on my end for a better solution.
Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
 
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.362 seconds.