LEADTOOLS Support
Document
Document SDK Questions
Display for selection multiple document (as in files) thumbnails
#1
Posted
:
Thursday, February 26, 2015 8:56:06 AM(UTC)
Groups: Registered
Posts: 23
How do I display a list (thumbnail of first page) of documents (files) in a folder for the user to select? Once selected I intend to use DocumentFactory DocumentViewer to work with the selected document.
Using V19.
#2
Posted
:
Sunday, March 1, 2015 5:22:09 AM(UTC)
Groups: Registered, Tech Support
Posts: 1,326
Was thanked: 1 time(s) in 1 post(s)
I am attaching a small LEADTOOLS v19 C# VS 2010 (Dotnet 4) project that shows how you can show images as thumbnails from folder.
Also, check out the following DocumentViewer's tutorial:
https://www.leadtools.com/help/leadtools/v19/dh/doxui/leadtools.documents.ui~leadtools.documents.ui.documentviewer.html
Thanks,
Maen Badwan
LEADTOOLS Technical Support
#3
Posted
:
Monday, March 2, 2015 4:51:21 AM(UTC)
Groups: Registered
Posts: 23
Thanks for you reply.
The attached project works fine with images but not with PDF or other documents.
The link to the tutorial works fine for a single document but not a folder of documents.
What I am hoping for is a way to use the documentviewer tool to display thumbnails for multiple documents in a folder so that a document can be selected and then displayed in the documentviewer.
#4
Posted
:
Tuesday, March 3, 2015 3:20:13 AM(UTC)
Groups: Registered, Tech Support
Posts: 1,326
Was thanked: 1 time(s) in 1 post(s)
You can modify the code to load PDF or DOC files. For example, the following code shows how you can load all PDF files in the selected folder in the image list. Note that the code loads only the first page of the PDF file. You can customize the code to save the name of the source PDF file to load all the pages when you select the file from the lst:
Code:
private void loadImagesIntoListToolStripMenuItem_Click(object sender, EventArgs e)
{
var browserDlg = new FolderBrowserDialog();
if (browserDlg.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
var filePaths = System.IO.Directory.GetFiles(browserDlg.SelectedPath, "*.pdf");
_rasterImageList.BeginUpdate();
var count = 1;
foreach (var file in filePaths)
{
using (var thumbnailImage = _codecs.Load(file,1))
{
var item = new ImageViewerItem();
item.Image = thumbnailImage.Clone();
item.PageNumber = count;
item.Text = "Page " + item.PageNumber.ToString();
_rasterImageList.Items.Add(item);
count++;
}
}
_rasterImageList.EndUpdate();
}
}
Note that to load PDF and DOC files, you need to add (at least) the Leadtools.Pdf.dll and Leadtools.Codecs.Doc.dll, as references in your project.
You can find more information about the required LEADTOOLS DLLs for each format in the following online help topic:
https://www.leadtools.co...withyourapplication.htmlThanks,
Maen Badwan
LEADTOOLS Technical Support
Edited by moderator Friday, November 18, 2016 9:43:54 AM(UTC)
| Reason: Syntax highlighting
#5
Posted
:
Friday, November 18, 2016 7:04:09 AM(UTC)
Groups: Registered
Posts: 3
Hi,
Can I accomplish similar functionality in javascript as well ?
Thanks
#6
Posted
:
Friday, November 18, 2016 11:59:29 AM(UTC)
Groups: Tech Support
Posts: 366
Thanks: 1 times
Was thanked: 4 time(s) in 4 post(s)
Yes, you can use the
ImageViewer to display multiple images at the same time. You can use it to create a ThumbnailBrowser. You'll likely want to check out the image viewer layouts for how the viewer will display your images. To figure out which document has been selected, use the ItemChanged event or SelectedItemsChange event as a prompt to check which document the user wants to view.
There's nothing built into LEADTOOLS or the demos to illustrate getting documents from a directory. The ImageViewer demo has a couple of hard-coded samples that the user can choose to display. However you determine how your application will get the URLs to files that need to be displayed, you can use the raster service to then load the first page of that document to be displayed for the user.
Once the user selects the document, then you can have the
DocumentViewer display it.
Edited by moderator Tuesday, July 21, 2020 2:18:20 PM(UTC)
| Reason: Not specified
Walter Bates
Senior Support Engineer
LEAD Technologies, Inc.
#7
Posted
:
Monday, November 21, 2016 6:23:39 AM(UTC)
Groups: Registered
Posts: 3
Thanks for your valuable reply but can i have a code snippet or something to see how can i create clickable thumbnails using leadtools ?
And one more thing is that thumbnails are of different individual images i.e. they are not the pages of a .pdf .
Thanks
#8
Posted
:
Wednesday, December 21, 2016 5:40:28 PM(UTC)
Groups: Manager, Tech Support, Administrators
Posts: 218
Was thanked: 12 time(s) in 12 post(s)
Here is some JavaScript code that shows how to create a clickable thumbnail viewer and display the clicked thumbnail in an image viewer:
Code:var imageViewer;
var thumbnailViewer;
window.onload = function () {
InitImageViewer();
InitThumbnailViewer();
};
function InitThumbnailViewer()
{
var thumbnailViewerDiv = document.getElementById("thumbnailViewerDiv");
var createOptions = new lt.Controls.ImageViewerCreateOptions(thumbnailViewerDiv);
createOptions.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout();
thumbnailViewer = new lt.Controls.ImageViewer(createOptions);
thumbnailViewer.imageBorderThickness = 1;
thumbnailViewer.itemBackgroundColor = "yellow";
thumbnailViewer.itemBorderThickness = 1;
thumbnailViewer.itemSize = lt.LeadSizeD.create(150, 150);
thumbnailViewer.itemSizeMode = lt.Controls.ControlSizeMode.fit;
thumbnailViewer.items.addFromUrl("Images/Page1.png", lt.LeadSizeD.empty);
thumbnailViewer.items.addFromUrl("Images/Page2.png", lt.LeadSizeD.empty);
thumbnailViewer.items.addFromUrl("Images/Page3.png", lt.LeadSizeD.empty);
thumbnailViewer.items.addFromUrl("Images/Page4.png", lt.LeadSizeD.empty);
thumbnailViewer.interactiveModes.beginUpdate();
var interactiveMode = new lt.Controls.ImageViewerSelectItemsInteractiveMode();
interactiveMode.isEnabled = true;
thumbnailViewer.interactiveModes.add(interactiveMode);
thumbnailViewer.interactiveModes.endUpdate();
thumbnailViewer.selectedItemBackgroundColor = "lightblue";
thumbnailViewer.selectedItemsChanged.add(function(sender,e){
imageViewer.imageUrl = this.items.getSelected()[0].url;
});
}
function InitImageViewer()
{
var imageViewerDiv = document.getElementById("imageViewerDiv");
var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
imageViewer = new lt.Controls.ImageViewer(createOptions);
// Load an image in the viewer
imageViewer.imageUrl = "Images/Page1.png";
}
Here is a screenshot of it working:
Attached is a working sample for you to use and test with
Let me know if you have any issues.
Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.
LEADTOOLS Support
Document
Document SDK Questions
Display for selection multiple document (as in files) thumbnails
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.