Extract image x/y coordinates and width and height info from PDF via IL or PS

Question

We have a professionally designed floor plan in PDF form for an event we are running currently. It is similar to a CAD drawing. We have booths (rectangular squares) drawn on it.

I have a colleague who is in the process of building a phone app and possibly a web app both of which we would like to contain an interactive floor plan which will ultimately be an image with a big image map drawn over it in HTML. To achieve this he needs the x/y coordinates of each booth or x1/y1 and x2/y2.

I am a web dev by trade so please bear with me! Is there a way to extract this data programmatically using Illustrator/Photoshop? I know you can write scripts to run in both but I would have no idea where to start.

He could do this manually but the floor plans change frequently hence we would need a quick/automatic way of doing this.

Answer 1

You can always load the document into Photoshop and user the lineal tool to measure elements into pixels, but if you need to work with more than one document in more than one case this approach will end up severely tedious and error prone.

Photoshop do have a API as you say to enable scripting, but you can't extract elements from scripts as elements are rasterized and that information is not preserved. In illustrator however, this information is preserved and you would probably be able to extract it via script.

Using scripts with Illustrator for this is not the best approach IMO though, if you plan to do this often. You are binding your self to a platform which is locked to a machine, cannot be moved to a server and so forth. You will need a more independent solution.

As PDF is nothing but postscript (basically) you can always extract content using the Postscript language. However, it is a pretty specialized language and relatively few knows it. I won't suggest anyone go and learn it if they don't already know it.

The better approach in your case will probably be to buy a license for a wrapper-library which parse all the hard stuff for you and let you extract elements in a simple way by calling a method on it.

As PDF is print oriented so all coordinates is relative to DPI, so this is something you would need to convert in your software relative to whatever unit is used (cm, mm, inches etc.). But for this you use a very simple formula.

As you don't state development platform I cannot give any specific suggestion on such a library, but be sure, there are many options out there for most common platforms (.Net, Java, PHP and so forth). But be carefully looking for one that not only allow you to create a PDF (almost all do), but also read and parse a PDF document (fewer do).

The process itself is simple:

1. Extract the element you need calling a small set of functions/methods
2. Get the coordinate and size
3. Calculate into pixels relative to DPI and unit used.
4. Convert element into bitmap (rasterized) representation.

Answer 2

Hi Guys and thanks for your detailed answers. Neither of us are PS / IL experts so some of this seems a little complicated for what we wanted.

My colleague actually found something that pretty much did what he wanted - which was to save the PS file as .svg which apparently gave a data set of co-ordinates that he could work with.

Thanks.

Answer 3

I have script for task like this — http://pastebin.com/YHaZp7ZN

It takes selected objects and add text object with coordinates above. You can adjust it to your needs.

Feel free to contact me about this.

Answer 4

There is another way that I use often. You have to set each slice with the slice tool. CS6 Then 1. save for web -> 2. optimize menu (top right) -> 3. settings: default -> 4. Slices (from the drop down) -> 5. Generate CSS by ID -> 6. OK + preview from save for web window PS generates css code, containing all elements measures and x/y coordinates ready to be copy pasted in CSS.