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

Notification

Error

annotate and load images via image viewer items

Options

View

Last

Unread

Previous Topic Next Topic

#1 Posted : Tuesday, February 21, 2017 12:24:07 PM(UTC)

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 account or Register a new forum account.

#2 Posted : Friday, February 24, 2017 3:25:05 PM(UTC)

Hadi

Groups: Manager, Tech Support, Administrators
Posts: 218

Was thanked: 12 time(s) in 12 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.

#3 Posted : Monday, February 27, 2017 6:38:56 AM(UTC)

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:22:22 PM(UTC)

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:17:02 AM(UTC)

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.

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.