ColdFusion 8: CFPDF, tumbnails and tooltips

Posted At : June 4, 2007 7:05 AM | Posted By : Dave
Related Categories: ColdFusion

I have been checking out the ability to thumbnail pdf files. Currently I am very impressed with the accuracy and speed. I was able to thumbnail every page of a 27 page pdf in only 4 seconds. While I was working on checking all this out Ray Camden blogged about the new tooltip function. This got me to thinking, could I couple the pdf thumbnailing with a tooltip?

Here is what I came up with. First thing, before using the code create, a "thumbs" and a "temp" directory in the same directory as the code. Then take a pdf and put it in the same directory as the code. Make sure the var "pdfFile" has the name of your pdf file.

The first part is the thumbnail generator and display. This processes the pdf and creates thumbnails and lays them out 7 per row.

<!--- index.cfm --->
<CFSET pdfFile = "test.pdf">
<CFPDF ACTION="READ" NAME="testPDF" SOURCE="#expandPath('.')#\#pdfFile#">

<CFPDF ACTION="GETINFO" NAME="testInfo" SOURCE="testPDF">
<CFPDF ACTION="THUMBNAIL" SOURCE="testPDF" FORMAT="PNG" DESTINATION="#expandPath('.')#\thumbs" SCALE="15" OVERWRITE="YES" IMAGEPREFIX="img">

<CFOUTPUT>
<CFLOOP INDEX="x" FROM="1" TO="#testInfo.TotalPages#">
   <CFIF x mod 7 EQ 1><BR></CFIF>
   <cftooltip sourcefortooltip="preview.cfm?id=#x#&pdf=#pdfFile#" PREVENTOVERLAP="TRUE"><IMG SRC="./thumbs/img_page_#x#.png" BORDER="1"></cftooltip>
</CFLOOP>
</CFOUTPUT>
The part that makes all this work is the cftooltip tag around the image output in the loop. This creates a tooltip for each image. When you put your mouse over each image it calls the tooltip function that makes an AJAX call to load the tooltip content. In this case the content is just an image.

This is the code for preview.cfm. It generates an image for a specific page in the pdf. I toyed with using cfimage to enlage the thumbnail but the output was not good.

<!--- preview.cfm --->
<CFPDF ACTION="THUMBNAIL" SOURCE="#expandPath('.')#\#url.pdf#" FORMAT="PNG" PAGES="#url.id#" DESTINATION="#expandPath('.')#\temp" SCALE="75" OVERWRITE="YES" IMAGEPREFIX="img">
<CFOUTPUT><IMG SRC="./temp/img_page_#id#.png" BORDER="0"></CFOUTPUT>

Unfortunately, there are some things about this that I do not like. For starters the JS for the tooltip is bloated. There is also some very weird display issues with the tooltip. I am not sure that the tooltip stuff is ready for prime time. However, PDF thumbnailing is amazing.

--Dave

Comments (4) | Print | Send | del.icio.us | Linking Blogs | Digg it | 1185 Views

Comments
[Add Comment]
Dave, could you elaborate on the "weird display issues" you're having with tooltip? We can try to fix them once we know what they are.
# Posted By Ashwin | 6/5/07 9:25 PM
You can use the above code to see the "weird display issues". If run the example and put your mouse over the bottom row. The tooltip opens up, moves itself up so it is fully on the screen then instantly closes. I can't get this to duplicate every time but it does happen. Also using the same code if you slowly move your mouse over the top row of images from left to right and stop at the 5th. You end up getting a bunch of overlapped tooltips.

--Dave
# Posted By Dave | 6/6/07 5:45 AM
Thanks, Dave - we'll look into it.
# Posted By Ashwin | 6/6/07 9:22 PM
Hi Dave,

Yes, we do see the issues you were facing.

The issue with overlapped tooltips is a genuine one and we will be working on resolving it but the other issue is more a result of bigger size thumbnailed PDF's. We will see
what we can do here but changing the scale attribue to 50% or so, should result in proper behavior.

Let us know if you find anything else.

Thanks,
Vamsee
# Posted By Vamsee | 6/6/07 11:01 PM
[Add Comment]