Create a document image overlay component

[GoogleCodeExporter]

Currently, HTML documents are supported for laying out a document and it's 
associated fields.

Would like the ability to specify pages as document images (one image per page) 
to avoid the layout issues for fixed documents, and then specify the fields as 
"overlays" (x,y positions within the image where the fields should be 
positioned on top of the image).

Original issue reported on code.google.com by yoz...@gmail.com on 29 Aug 2013 at 5:59

[GoogleCodeExporter]

We seem to understand a basic way to show the image and the related 
input/display fields positioned as overlays on the image.  This is pretty 
straightforward with simple CSS.  Use a DIV with position:relative, then add 
inside that DIV the IMG and various INPUT fields such that they use 
position:absolute plus an element style that sets the left, top, width and 
height.  Of course, fields like a radio button and checkbox don't use a width & 
height as it will end up moving it. Also, no padding or margins of the input 
fields should be used.

The issue for now is how to create a builder for this.  It can be done today if 
the user specifies those coordinates and sizes, but we should get a builder 
that lets us specify the field positions on the image so that the user doesn't 
have to determine it themselves, such as by using an image/paint program.

Original comment by yoz...@gmail.com on 29 Aug 2013 at 11:54

• Changed state: Started

[GoogleCodeExporter]

Here's a simple demo HTML page that shows the field overlays on top of the W-9:

https://open.esignforms.com/demo/test/w-9-overlay.html

So if anybody has good ideas on a "field layout builder" for such overlays, let 
us know. For now, we may consider adding this with manual specifications of the 
location and size so it's usable, just not as easy as we'd like.

Original comment by yoz...@gmail.com on 30 Aug 2013 at 5:42

[GoogleCodeExporter]

Some tools we can consider:  

http://paperjs.org/ - May be a good tool for specifying the field positions and 
sizes by drawing the field positions as rectangles on top of the image.

http://www.zan1011.com/ - For some, may be a good way to use a print driver to 
generate the page images.

http://sourceforge.net/projects/imageprinter/ - Open source (GPLv2) image print 
driver for Windows.  Questions: Support for 64-bit Windows and related install 
issues?  Is this truly open source (could not find the source code and they are 
related to other products that sell).

Original comment by yoz...@gmail.com on 5 Sep 2013 at 12:29

[GoogleCodeExporter]

The plan is for this to be in the next release, allowing you to choose which 
field templates in a document should overlay an image defined in the document. 
It essentially adds CSS-like properties to a field template for left, top, 
width and height (radio buttons and checkboxes ignore the width/height as they 
don't generally increase these values but reposition the fixed size elements as 
if they were that big).

Original comment by yoz...@gmail.com on 9 Oct 2013 at 11:09

[GoogleCodeExporter]

First version released in 13.11.9. We'll probably want to open further tickets 
for enhancements like perhaps trying to integrate with paperjs.org for a field 
layout builder to ease the specification of locations and sizes of the overlay 
fields.

Original comment by yoz...@gmail.com on 11 Nov 2013 at 6:31

• Changed state: Fixed