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 : Tuesday, February 21, 2017 12:29:07 PM(UTC)

maneka  
maneka

Groups: Registered
Posts: 17

Thanks: 1 times

I have the following code.
Code:

 window.onload = function () {

            var interactiveModes = [
            new lt.Annotations.JavaScript.AutomationInteractiveMode(),
            new lt.Controls.ImageViewerPanZoomInteractiveMode(),
            new lt.Controls.ImageViewerNoneInteractiveMode(),
            new lt.Controls.ImageViewerCenterAtInteractiveMode(),
            new lt.Controls.ImageViewerZoomToInteractiveMode(),
            new lt.Controls.ImageViewerSelectItemsInteractiveMode()
            ];

            var imageViewerDiv = document.getElementById("imageViewerDiv");
            var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
            createOptions.useElements = true;
            var imageViewer = new lt.Controls.ImageViewer(createOptions);
            imageViewer.beginTransform();
            var item = new lt.Controls.ImageViewerItem();
            item.url = "http://localhost:58137/Images/Default/default.jpg";
            imageViewer.items.add(item);
            imageViewer.endTransform();
           

            imageViewer.interactiveModes.beginUpdate();
            for (var i = 0; i < interactiveModes.length; i++) {
                var mode = interactiveModes[i];
                mode.isEnabled = false;
                if (mode.name == 'SelectItems') {
                    (mode).selectionMode = lt.Controls.ImageViewerSelectionMode.single;
                }
                imageViewer.interactiveModes.add(mode);
            }

            imageViewer.interactiveModes.endUpdate();
            imageViewer.interactiveModes.enableByIndex(0);

            var renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
            var manager = new lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine);
            manager.createDefaultObjects();
            manager.editObjectAfterDraw = false;

            var automationControl = new lt.Annotations.JavaScript.ImageViewerAutomationControl();
            automationControl.imageViewer = imageViewer;


            var automation = new lt.Annotations.Automation.AnnAutomation(manager, automationControl);
            imageViewer.itemChanged.add(function (sender, e) {
                var container = automation.container;
                container.size = container.mapper.sizeToContainerCoordinates(imageViewer.imageSize);
                manager.currentObjectId = lt.Annotations.Core.AnnObject.freehandObjectId;
            });
            automation.active = true;
            imageViewer.autoCreateCanvas = true;
        };


what I am trying to achieve is a scenario where multiple images can be loaded into a image viewer and annotated. and then save the xml produced
however the issue with the pasted code is that it does not load the image.
any help provided is appreciated

Thank you
Maneka
 

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 3:30:05 PM(UTC)

Hadi  
Hadi

Groups: Manager, Tech Support, Administrators
Posts: 197

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

Maneka,

Thank you for posting on the LEADTOOLS Technical Support Forums with your question.

I took the code you provided and tested it out and noticed some errors in the console. It looks like the AutomationControl for the AutomationInteractiveMode was never set which was causing some errors. I set it and now it is working. Here is the updated code for you to use:

Code:
window.onload = function() {

var automationInteractiveMode = new lt.Annotations.JavaScript.AutomationInteractiveMode();

    var interactiveModes = [
        automationInteractiveMode,
        new lt.Controls.ImageViewerPanZoomInteractiveMode(),
        new lt.Controls.ImageViewerNoneInteractiveMode(),
        new lt.Controls.ImageViewerCenterAtInteractiveMode(),
        new lt.Controls.ImageViewerZoomToInteractiveMode(),
        new lt.Controls.ImageViewerSelectItemsInteractiveMode()
    ];

    var imageViewerDiv = document.getElementById("imageViewerDiv");
    var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
	createOptions.viewLayout = new lt.Controls.ImageViewerSingleViewLayout();
    var imageViewer = new lt.Controls.ImageViewer(createOptions);

	var item = new lt.Controls.ImageViewerItem();
	item.url = "Images/default.jpg";
	imageViewer.items.add(item);


    var renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
    var manager = new lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine);
    manager.createDefaultObjects();
    manager.editObjectAfterDraw = false;

    var automationControl = new lt.Annotations.JavaScript.ImageViewerAutomationControl();
    automationControl.imageViewer = imageViewer;
	automationInteractiveMode.automationControl = automationControl;

    imageViewer.interactiveModes.beginUpdate();
     for (var i = 0; i < interactiveModes.length; i++) {
         var mode = interactiveModes[i];
         mode.isEnabled = false;
         if (mode.name == 'SelectItems') {
             (mode).selectionMode = lt.Controls.ImageViewerSelectionMode.single;
         }
        imageViewer.interactiveModes.add(mode);
    }
	
    imageViewer.interactiveModes.endUpdate();
    imageViewer.interactiveModes.enableByIndex(0);

	
    var automation = new lt.Annotations.Automation.AnnAutomation(manager, automationControl);
    imageViewer.itemChanged.add(function(sender, e) {
        var container = automation.container;
        container.size = container.mapper.sizeToContainerCoordinates(imageViewer.imageSize);
        manager.currentObjectId = lt.Annotations.Core.AnnObject.freehandObjectId;
    });
    automation.active = true;
};


Also, please note that I removed a couple of unnecessary lines of code and added a few more.

Let me know if you have any questions about this.

Thank you,
Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.

LEAD Logo
 
#3 Posted : Monday, February 27, 2017 6:43:56 AM(UTC)

maneka  
maneka

Groups: Registered
Posts: 17

Thanks: 1 times

Hi

I chose the item approach because I want to be able to annotate multiple images at once. however when I add another item the two images appear but it doesn't allow me to annotate

Thank you
Maneka
 
#4 Posted : Monday, February 27, 2017 12:27:22 PM(UTC)

maneka  
maneka

Groups: Registered
Posts: 17

Thanks: 1 times

this is the code
Code:

function loadAll(){
            var imageViewerDiv = document.getElementById("imageAdapter");
            var widthHeight = getDisplayHeightWidth();
            $(imageViewerDiv).height(widthHeight.height);
            $(imageViewerDiv).width(widthHeight.width);
            var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
            
            AnnotationService.imageViewer = new lt.Controls.ImageViewer(createOptions);

            loaditems(AnnotationService.imageViewer);

           var verticalLayout = new lt.Controls.ImageViewerVerticalViewLayout();
            verticalLayout.columns = 2;
            AnnotationService.imageViewer.viewLayout = verticalLayout;

            var renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
            var manager = new lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine);
            manager.createDefaultObjects();
            manager.editObjectAfterDraw = false;

            var automationControl = new lt.Annotations.JavaScript.ImageViewerAutomationControl();
            automationControl.imageViewer = AnnotationService.imageViewer;
            automationInteractiveMode.automationControl = automationControl;

             var automation = new lt.Annotations.Automation.AnnAutomation(manager, automationControl);

            AnnotationService.imageViewer.itemChanged.add(function (sender, e) {
                var container = automation.container;
                container.size = container.mapper.sizeToContainerCoordinates(AnnotationService.imageViewer.imageSize);
            });
            automation.active = true;

}

 function loaditems () {
            var baseUrl = window.location.origin;

            AnnotationService.imageViewer.beginTransform();

            for (var i = 0; i < AnnotationService.mediaReviewModel.contexts.length; i++) {
                var currentUrl = baseUrl + AnnotationService.config.videoBaseUrl + '/' + sv.fileName;
                var item = new lt.Controls.ImageViewerItem();
                item.url = currentUrl;
                AnnotationService.imageViewer.items.add(item);
            }

            AnnotationService.imageViewer.endTransform();
        }


Thank you
 
#5 Posted : Wednesday, March 8, 2017 9:22:02 AM(UTC)

Aaron  
Aaron

Groups: Registered, Tech Support, Administrators
Posts: 71

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

I have posted a How To post for loading multi-page annotations, which also demonstrates how you would annotate and load images using the ImageViewerItems. The project uses AnnCodecs to load the annotations from an XML file to add the annotations to each ImageViewerItem along with the corresponding image.

You can find the post here:

https://www.leadtools.co...le-Multipage-Annotations
Aaron Brasington
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.170 seconds.