Implement pdf annotations editor

[libreliodev]

As mentioned in the pdf reader specifications (#30,#32,#33 ...), we support regular links, plus links with a specific syntax for videos and slide shows. We need to make it possible for our admin users to edit these links.

Here are the ideas we have about how this could work. @serverfire @intrications please let us know if you see potential issues in these first ideas:

• the interface should be similar to the one we have for our svg editor (Add svg editing page based on SVG-edit #23)
• there should be a preview mode powered by the pdf reader
• when opening a page for editing, annotations should be displayed on the page, and stored in a temporary xml file
• admin user should be able to add or remove annotations using drag and drop similarly to our svg editor; temporary xml file should be updated and saved accordingly on the S3 server (or locally?)
• when admin user clicks on save, pdf file should be updated using the web service we are going to develop, specified here https://github.com/libreliodev/java/issues

[AlirezaAlgo]

@libreliodev This task seams to be the right way to implement this feature.
I also saw http://jspdf.com, But i couldn't see a method to read existing pdf. Also nothing about annotation. Maybe jsPDF will be a better solution for this task later.

[AlirezaAlgo]

@libreliodev Here's a partial implementation of this task.
I also added some files missing from other tasks.
Please see how it is. There's few features missing. I'll add them.
Sorry it took so long.

[AlirezaAlgo]

You can see how it works using this url.
dist/admin/pdf-annotation-editor.html?waurl=niveales%2Fwind%2Fwind_355%2Fwind_355.pdf

[libreliodev]

This looks like a good start. Do you intend to implement an interface similar to the svg editor, as specified above?

[AlirezaAlgo]

@libreliodev I'm not sure what do mean. Looks are important or features?
I've used bootstrap for looks because the project uses bootstrap and It's a robust library(We can rely on it). But svgedit has custom interface.
If you want to change it. It's ok.

[libreliodev]

@serverfire I am opened to suggestions. What is important is to keep the same look and feel acrsso editors (but we actually do not really need the svg editor). Also we will need some drag and drop features similar to svg editor in the future in order to add buttons. So, what do you suggest?

[AlirezaAlgo]

@libreliodev I think using bootstrap for all editors is nice thing to do.(I mean using the same libraries where included in admin project).
How is this menu I've created at top?
We can improve the style of sidebar.
I've made the structure of the pages the way that we can create different look and themes for it later.
I think It's better to create a task for graphical stuff.
Now we should see the features and how they work.

[libreliodev]

@serverfire

I think using bootstrap for all editors is nice thing to do.(I mean using the same libraries where included in admin project).

OK, let's do that. Then, I would suggest we keep the look and feel of the Metis template we are using. There is an editor template page: http://demo.onokumus.com/metis/file.html . Is it OK to use it for you?

[AlirezaAlgo]

@libreliodev I'm not sure about Metis. I've tried to work with it but apparently it does not very good job on loading dynamic content. But if you think otherwise I'll use it.

[libreliodev]

@serverfire I am not sure about what you mean by "it does not very good job on loading dynamic content". Maybe you want to explain a bit more for me to understand. Otherwise, yes, I like the idea of sticking with Metis.

[AlirezaAlgo]

@libreliodev
When i was working on admin tables like the one in users page. Sometimes we should remove/add elements on the fly and i couldn't find anything where was related to that.
Maybe I'm wrong. I didn't saw any explanation about Metis. I need to know more about it.
And also i don't have access to submodules of this repository. Maybe that's the problem.

[libreliodev]

@serverfire Thanks. So, is it OK to continue with Metis?

[AlirezaAlgo]

@libreliodev Ok, I need to know more about it.

[libreliodev]

@serverfire OK, let me detail the original spec.

the interface should be similar to the one we have for our svg editor

As agreed, please use the Metis editor template page instead.

there should be a preview mode powered by the pdf reader

This should be toggled by a button in the upper bar. There should be not need to reload the entire pdf file for this. In preview mode, the enhancements (for example autoplay) should be active. In regular mode, the annotation rects should be displayed.

admin user should be able to add or remove annotations using drag and drop similarly to our svg editor

It should be possible to move/resize/delete annotations using standard drag and drop UI. Additionally, when clicking on an annotation, details of the annotation should appear in the left column:

• link of the annotation (without "wa" args)
• options of the enhancement (for example autoplay or not, full screen or not ...)

temporary xml file should be updated and saved accordingly on the S3 server (or locally?)

The syntax of this file (which should finally be a json file) is up to you (whatever is most convenient). It's probably a good idea to store it locally rather than on the S3 server to avoid concurrency issues, but comments/suggestions will be welcome

when admin user clicks on save, pdf file should be updated using the web service we are going to develop, specified here https://github.com/libreliodev/java/issues

We will finally not use a web service. We will finally use AWS SQS. Please send a new message to this queue URL: https://sqs.eu-west-1.amazonaws.com/105216790221/php

Please send the following "MessageBody":

• type: "UpdatePDF"
• url: url of the pdf file to update
• annotations: annotations in json format

[AlirezaAlgo]

@libreliodev Alright. All check. Except Metis. I don't know how to use Metis. I need some documentation and use cases for using it. For now I did used bootstrap.
And save returns "AccessDenied" error
Post:

AWSAccessKeyId  AKIAIQHMUDV2ENGP3LGQ
Action  SendMessage
MessageBody {"type":"UpdatePDF","url":"developer/sportguide/Sportguide_037/Sportguide_037.pdf","annotations":[[{"subtype":"Link","rect":[16.535444444444444,695.2687078651685,569.2917301587302,808.7819662921348],"linktype":"page","value":"3","page_index":1,"element":{"0":{},"length":1}},{"subtype":"Link","rect":[75.59060317460316,470.60705056179773,453.54361904761896,624.3229213483146],"linktype":"url","value":"http://serverfire.net/?warect=self","page_index":1,"url":"http://serverfire.net/?warect=self","value_query":{"warect":"self"},"value_link":"http://serverfire.net/","element":{"0":{},"length":1}}],[],[],[],[],[],[],[],[]]}
QueueUrl    https://sqs.eu-west-1.amazonaws.com/105216790221/php
Version 2012-11-05

[libreliodev]

@serverfire

And save returns "AccessDenied" error

Sorry, the AWS policy has been updated.

[libreliodev]

@serverfire Will you please provide a new link to test when it's ready?

[AlirezaAlgo]

@libreliodev Sorry for late answer. AccessDenied Error has fixed.
You can test it using this path.
/dist/admin/pdf-annotation-editor.html
There's open button in File dropdown click it then you can select a publication in current app.

[libreliodev]

Postponed for the time being, will use the InDesign plug-in instead: https://github.com/libreliodev/indesign