"Include in Report Button" for external Apps

[p-a-s-c-a-l]

As described in this issue, we have to extend ReactMount and iFrame Content Types by an "Include in report" button that uses html2canvas to create a screenshot of the whole embedded app (e.g. map component with all layers as shown on the screen, table component or scenario-analysis component) and stores it in the GL-Step.

We could either add html2canvas.min.js to csis.libraries.yml in csis-theme and add a <button> + the respective REST calls to the Drupal API directly in an HTML field. Or we integrate the functionality (JS function) in the csis-helpers-module.

In any case, the "Include in Report Button" needs to be parametrised with the following contextual information:

• id of the html element that should be 'snap-shotted' by html2canvas
• target node and field where the snapshot (HTML Canvas serialised as image/png) should be stored (via JSON/REST API)

[fgeyer16]

We could either add html2canvas.min.js to csis.libraries.yml in csis-theme and add a <button> + the respective REST calls to the Drupal API directly in an HTML field. Or we integrate the functionality (JS function) in the csis-helpers-module.

This has to be included in csis-helper module. Modules are for functionality themes for looking nice :-)
Maybe this should be a small separate module.

May be I missed something on glimpsing on html2canvas. But how do we get an Imagefile from that to upload to the server?

[p-a-s-c-a-l]

May be I missed something on glimpsing on html2canvas. But how do we get an Imagefile from that to upload to the server?

Here is an example: https://github.com/clarity-h2020/scenario-analysis/blob/dev/app/scripts/controllers/mainController.js#L170

document.body.appendChild(canvas); is just for testing purposes. It should be commented out.
var imageBlob = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, ''); will get the image data from the canvas that was created by html2canvas from the html element identified by elementId

See also https://html2canvas.hertzen.com/

[fgeyer16]

Ah thank you.

[p-a-s-c-a-l]

@fgeyer16 Any progress, plans, suggestions, ... here :-)

Is this the 'Snapshot' Field?

[p-a-s-c-a-l]

@patrickkaleta @fgeyer16
FYI: Complete example for taking screenshots and posting to Drupal API is available in drupalService.js

[patrickkaleta]

Screenshots of maps and table are now being stored as Report images, which are linked to the corresponding GL-Step and can be viewed in the Summary tab and printed out in the report.

@p-a-s-c-a-l
FYI: I mainly followed your approach (thanks for providing the link) and managed to implement it in "plain" JavaScript.
Instead of sending a GET request for the GL-Step and later PATCHing that same GL-Step with the new Report Image, I'm sending another POST request in the end against the relationship endpoint for the Report Images array of the GL-Step. (more on this here)

So the whole approach looks like this:

1. POST new file of the screenshot (same as your approach)
2. POST new Report Image including the UUID of the new file retrieved in 1) (same as your approach)
3. POST new Relationship for the respective GL-Step, payload only contains the entity type and UUID of the Report image (the GL-Step and the type of the relationship is already part of the URL)

[patrickkaleta]

I wouldn't close this issue just yet, since @DenoBeno suggested that we show to the user an Edit-form, where he/she can enter a description for the Report image, when they click on the "Include in Report" Button.
Reason: They can edit the description of a Report image on the Summary-Tab, but once they get to that tab, they might've already forgotten what this screenshot was really about.
Problem: We cannot show an Edit form for the Report Image directly, since this Report image doesn't exist until after the user clicks that button.
@fgeyer16 might've come up with a possible solution to this, so I will talk to him and try to implement it

[p-a-s-c-a-l]

Any progress to report here?

[patrickkaleta]

Already done. Suggestions by @DenoBeno have been implemented. I forgot to update & close the issue.

[p-a-s-c-a-l]

The Button does not work for the Study Area Map.

[p-a-s-c-a-l]

See clarity-h2020/csis-helpers-module#9