LEADTOOLS Support
Document
Document SDK Questions
Annotating multiple Items in Image Viewer issue
#1
Posted
:
Thursday, March 2, 2017 6:38:58 AM(UTC)
Groups: Registered
Posts: 17
Thanks: 1 times
Hi
I have a scenario where a 30 images are uploaded
Code:
AnnotationService.prototype.loadAll = function (showAll) {
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('imageAdapterAll');
if (imageViewerDiv == null) {
imageViewerDiv = document.getElementById('imageAdapter');
}
var widthHeight = getDisplayHeightWidth();
var numPages = AnnotationService.mediaReviewModel.contexts.length;
var sections = numPages / 2;
var height = widthHeight.height * sections;
$(imageViewerDiv).height(height);
$(imageViewerDiv).width(widthHeight.width);
var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
var verticalLayout = new lt.Controls.ImageViewerVerticalViewLayout();
verticalLayout.columns = 2;
createOptions.viewLayout = verticalLayout; //new lt.Controls.ImageViewerSingleViewLayout();
AnnotationService.imageViewer = new lt.Controls.ImageViewer(createOptions);
AnnotationService.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, 1.0, AnnotationService.imageViewer.defaultZoomOrigin);
AnnotationService.imageViewer.scrollMode = lt.Controls.ControlScrollMode.auto;
AnnotationService.imageViewer.useElements = true;
//AnnotationService.imageViewer.viewLayout = verticalLayout;
loaditems(AnnotationService.imageViewer);
AnnotationService.imageViewer.postRender.add(function (sender, e) {
counter++;
if (counter == numPages) {
alert("loaded post render...");
}
});
var renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
var manager = new lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine);
manager.createDefaultObjects();
manager.editObjectAfterDraw = false;
manager.createDefaultObjects();
var hiddenAnnTools = document.getElementById("hiddenAnnTools");
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;
hiddenAnnTools.options[hiddenAnnTools.options.length] = new Option(name, id);
}
manager.userMode = lt.Annotations.Core.AnnUserMode.design;
AnnotationService.automationControl = new lt.Annotations.JavaScript.ImageViewerAutomationControl();
AnnotationService.automationControl.imageViewer = AnnotationService.imageViewer;
automationInteractiveMode.automationControl = AnnotationService.automationControl;
AnnotationService.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;
}
AnnotationService.imageViewer.interactiveModes.add(mode);
}
AnnotationService.imageViewer.interactiveModes.endUpdate();
AnnotationService.imageViewer.interactiveModes.enableByIndex(0);
AnnotationService.activeAutomation = new lt.Annotations.Automation.AnnAutomation(manager, AnnotationService.automationControl);
AnnotationService.imageViewer.itemChanged.add(function (sender, e) {
var container = AnnotationService.activeAutomation.container;
container.size = container.mapper.sizeToContainerCoordinates(AnnotationService.imageViewer.imageSize);
});
hiddenAnnTools.addEventListener("change", function () {
var id = parseInt(hiddenAnnTools.options[hiddenAnnTools.selectedIndex].value);
// Set it as the current object in the manager
if (id != -1) {
AnnotationService.lastSelectedValue = id;
}
manager.currentObjectId = id;
});
AnnotationService.activeAutomation.active = true;
AnnotationService.imageViewer.activeItem = AnnotationService.imageViewer.items.item(0);
}
var loaditems = function (imageViewer) {
var baseUrl = window.location.origin;
AnnotationService.imageViewer.beginTransform();
for (var i = 0; i < AnnotationService.mediaReviewModel.contexts.length; i++) {
var currentUrl = baseUrl + '/' + contexts[i].sv.fileName;
var item = new lt.Controls.ImageViewerItem();
item.url = currentUrl;
AnnotationService.imageViewer.items.add(item);
}
AnnotationService.imageViewer.endTransform();
}
The images are loaded into the screen correctly However I can only annotate the initial bit in view I cannot scroll anything that is below the blue line please see screen shots
Can I know if it is possible to do this. Any help provided is appreciated. I am using the java script libraries for this
Thank you
Maneka
#2
Posted
:
Wednesday, March 8, 2017 9:44:05 AM(UTC)
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, that may give you a possible way to accomplish your task. The project uses AnnCodecs to load the annotations from an XML file to add the annotations to each ImageViewerItem along with the corresponding image and gives you the ability to navigate from page to page.
You can find the post here:
https://www.leadtools.co...le-Multipage-AnnotationsAaron Brasington
Developer Support Engineer
LEAD Technologies, Inc.
LEADTOOLS Support
Document
Document SDK Questions
Annotating multiple Items in Image Viewer issue
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.