LEADTOOLS Support
General
General Questions
How to Find out The Specific Image Item Position in Html5 Image Viewer
#1
Posted
:
Tuesday, November 7, 2017 10:48:45 AM(UTC)
Groups: Registered
Posts: 27
Thanks: 12 times
I have multiple image items added into image viewer. I want auto to scroll to certain item when user click on a button.
I can't seem to find any property or function in ImageViewer class and ImageViewer.items.item(0) object that can return the position of specific item.
Any help would be really appreciated.
#2
Posted
:
Tuesday, November 7, 2017 11:04:14 AM(UTC)
Groups: Registered, Tech Support, Administrators
Posts: 199
Was thanked: 28 time(s) in 28 post(s)
Hello Jay,
We have a method specifically for scrolling to an item inside an ImageViewer. You can read the documentation for this method here:
gotoItem method. There is sample code for using a similar method on the following page:
gotoItemByIndex method (linked to by the gotoItem page).
Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.
![LEAD Logo LEAD Logo](https://www.leadtools.com/images/new-site-images/leadtools-logo-header.png)
![thanks](/support/forum/Themes/lead/heart_small.png)
1 user thanked Anthony Northrup for this useful post.
#3
Posted
:
Wednesday, November 8, 2017 11:21:42 AM(UTC)
Groups: Registered
Posts: 27
Thanks: 12 times
Hi Anthony,
One question. When I tried to display multi page tiff image in html viewer. It shows only first page. Am I doing anything wrong? Thanks in advance.
#4
Posted
:
Wednesday, November 8, 2017 12:06:40 PM(UTC)
Groups: Registered, Tech Support, Administrators
Posts: 199
Was thanked: 28 time(s) in 28 post(s)
Hello Jay,
Could you provide a small application that shows how you are trying to display the file? There could be many reasons why it's only displaying one page. Without seeing your code, there isn't much I can offer.
Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.
![LEAD Logo LEAD Logo](https://www.leadtools.com/images/new-site-images/leadtools-logo-header.png)
#5
Posted
:
Wednesday, November 8, 2017 12:22:33 PM(UTC)
Groups: Registered
Posts: 27
Thanks: 12 times
Code: var imageViewerDiv = document.getElementById("imageViewerBody");
var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
imageViewer = new lt.Controls.ImageViewer(createOptions);
imageViewer.items.clear();
imageViewer.zoom(lt.Controls.ControlSizeMode.fit, 1, imageViewer.defaultZoomOrigin);
/*****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) {
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;
imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;
imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center;
imageViewer.set_itemSpacing(lt.LeadSizeD.create(400,10));
// Use vertical view layout
imageViewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout();
//imageViewer.viewLayout = new lt.Controls.ImageViewerSingleViewLayout();
imageViewer.imageBorderThickness = 0;
imageViewer.activeItemBackgroundColor = "blue";
imageViewer.selectedItemBackgroundColor = "blue";
// Add the interface mode to select items (single)
var selectItemsMode = new lt.Controls.ImageViewerSelectItemsInteractiveMode();
selectItemsMode.selectionMode = lt.Controls.ImageViewerSelectionMode.single;
// Tell the mode to set the active item for us
selectItemsMode.autoItemMode = lt.Controls.ImageViewerAutoItemMode.autoSetActive;
imageViewer.defaultInteractiveMode = selectItemsMode;
var item = new lt.Controls.ImageViewerItem();
var imageUrl = "http://demo.leadtools.com/JavaScript/Thumbnails/Resources/Samples/Ocr1-4.tif";
item.url = imageUrl;
imageViewer.items.add(item);
#6
Posted
:
Wednesday, November 8, 2017 1:52:00 PM(UTC)
Groups: Registered, Tech Support, Administrators
Posts: 199
Was thanked: 28 time(s) in 28 post(s)
Hello Jay,
Image loading using the ImageViewer is browser dependent, if the browser supports the file format, it will load correctly. You can see which browsers support various formats here:
https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support. While IE does support TIFF files, it doesn't seem like it loads all the pages. You can test this by simply putting an image tag pointing to the TIFF.
Code:
<img src="http://demo.leadtools.com/JavaScript/Thumbnails/Resources/Samples/Ocr1-4.tif" />
The loading issue isn't with the LEADTOOLS SDK, but with browser support for TIFF files. If you want to view multi page TIFF files in every browser, you will have to use our
DocumentViewer and a service to handle processing the images. We have an example of this at: C:\LEADTOOLS 19\Examples\JS\Documents\BasicDemos, with Apps\App1 being our document viewer. We also have this example hosted on our website
here.
Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.
![LEAD Logo LEAD Logo](https://www.leadtools.com/images/new-site-images/leadtools-logo-header.png)
#7
Posted
:
Wednesday, November 8, 2017 2:33:20 PM(UTC)
Groups: Registered
Posts: 27
Thanks: 12 times
If I use Document Viewer, do I have to write a web service or there is web service library provide by leadtools?
#8
Posted
:
Wednesday, November 8, 2017 3:28:59 PM(UTC)
Groups: Registered, Tech Support, Administrators
Posts: 199
Was thanked: 28 time(s) in 28 post(s)
Hello Jay,
We have an example web service available here:
C:\LEADTOOLS 19\Examples\JS\Documents\DocumentViewer
There are various demos included in this project. If you are looking for something more basic, we also have the project I mentioned previously (BasicDemos).
Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.
![LEAD Logo LEAD Logo](https://www.leadtools.com/images/new-site-images/leadtools-logo-header.png)
![thanks](/support/forum/Themes/lead/heart_small.png)
1 user thanked Anthony Northrup for this useful post.
#9
Posted
:
Friday, November 10, 2017 10:09:02 AM(UTC)
Groups: Registered
Posts: 27
Thanks: 12 times
Hi Anthony,
Thanks for the advice. Really appreciated!. I have tried to run the Document viewer demo.
I can't seem to get DocumentsService to run after I copied the folder to my development folder.
I got following erros. Can you help out?
'FileCache' does not contain a definition for 'EnumerateRegions' and no extension method 'EnumerateRegions' accepting a first argument of type 'FileCache' could be found (are you missing a using directive or an assembly reference?) DocumentsService C:\Users\Jay\Dev\DocumentViewer002\Services\DocumentsService\Tools\Helpers\PreCacheHelper.cs
'FileCache' does not contain a definition for 'EnumerateRegions' and no extension method 'EnumerateRegions' accepting a first argument of type 'FileCache' could be found (are you missing a using directive or an assembly reference?) DocumentsService C:\Users\Jay\Dev\DocumentViewer002\Services\DocumentsService\Tools\Helpers\PreCacheHelper.cs
'FileCache' does not contain a definition for 'EnumerateKeys' and no extension method 'EnumerateKeys' accepting a first argument of type 'FileCache' could be found (are you missing a using directive or an assembly reference?) DocumentsService C:\Users\Jay\Dev\DocumentViewer002\Services\DocumentsService\Tools\Helpers\PreCacheHelper.cs
#10
Posted
:
Friday, November 10, 2017 3:27:02 PM(UTC)
Groups: Registered, Tech Support, Administrators
Posts: 199
Was thanked: 28 time(s) in 28 post(s)
Hello Jay,
Did you make sure you are referencing all the necessary DLLs? I was able to copy the DocumentsService to a different directory and run it, after sorting out the missing references. I wasn't able to reproduce the same error you did, could you attach a screenshot of the error and the steps to reproduce it?
Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.
![LEAD Logo LEAD Logo](https://www.leadtools.com/images/new-site-images/leadtools-logo-header.png)
![thanks](/support/forum/Themes/lead/heart_small.png)
1 user thanked Anthony Northrup for this useful post.
LEADTOOLS Support
General
General Questions
How to Find out The Specific Image Item Position in Html5 Image Viewer
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.