Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add image / screen capture download. #issue-255 #268

Merged
merged 2 commits into from Feb 28, 2019

Conversation

Projects
None yet
5 participants
@greebie
Copy link
Contributor

greebie commented Feb 25, 2019

Add a button to the graph to screen capture the canvas and save it to a file {collection_id}-image.png

GitHub issue(s):

#255

What does this Pull Request do?

Clicking the button that looks like this:

image

Will produce an image for a canvas like this:

image

and download a file called {collection-id}-image.png that looks like this.

image

And if you do some toggling and/or zooming in the screen, the changes will be preserved in the image:

image

How should this be tested?

  • Run auk
  • Enter collection screen, click image icon.
  • View image.

Additional Notes:

There are some UI considerations here before merge I think, but overall I think this works approximately the way it should.

Interested parties

@ianmilligan1 @SamFritz @ruebot

Thanks in advance for your help with the Archives Unleashed Toolkit!

@codecov-io

This comment has been minimized.

Copy link

codecov-io commented Feb 25, 2019

Codecov Report

Merging #268 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master     #268   +/-   ##
=======================================
  Coverage   96.39%   96.39%           
=======================================
  Files          35       35           
  Lines         555      555           
=======================================
  Hits          535      535           
  Misses         20       20

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 424d53d...fff35c7. Read the comment docs.

@ianmilligan1

This comment has been minimized.

Copy link
Member

ianmilligan1 commented Feb 25, 2019

Thanks - will test locally on my end, @greebie!

@SamFritz

This comment has been minimized.

Copy link
Member

SamFritz commented Feb 25, 2019

cool! Thanks @greebie, excited to test this out :)

@ianmilligan1

This comment has been minimized.

Copy link
Member

ianmilligan1 commented Feb 25, 2019

Got it working locally - nice!

Is it possible so that the "export" button exports the entire graph, not just what's visible in the view?

i.e. right now you get cut off exports i.e. if only part of the network is visible in the pane. I was thinking the export could generate the entire graph, even if it isn't in the view.

screen shot 2019-02-25 at 2 54 13 pm

@greebie

This comment has been minimized.

Copy link
Contributor Author

greebie commented Feb 25, 2019

I cannot think of a way to implement that off the top of my head.

Unfortunately, from javascript, I can only duplicate what exists in the canvas. It might be possible to use another library to save a graph image from the gexf the way we do derivatives.

It is possible to increase the image quality, so that the overall image is larger.

@ianmilligan1

This comment has been minimized.

Copy link
Member

ianmilligan1 commented Feb 25, 2019

Fair enough – I don't think we want to spend too much time on this. What would enhanced image quality look like?

@ruebot

This comment has been minimized.

Copy link
Member

ruebot commented Feb 26, 2019

Makes sense that it's really only what's in the viewport that you can export since that's the camera. Islandora does a similar thing with OpenSeadragon, and the export is what is in the viewport as well.

@ianmilligan1
Copy link
Member

ianmilligan1 left a comment

FWIW works well on my end as a user, put this through the paces and all works. But as discussed, we may want to change output filenames.

@greebie

This comment has been minimized.

Copy link
Contributor Author

greebie commented Feb 27, 2019

Latest commit add x, y and ratio coordinates to filename. That might be overkill, but I thought it would be easier to remove something than trying to find the values in the DOM again later on. I also use absolute values instead of integers.

@ruebot

This comment has been minimized.

Copy link
Member

ruebot commented Feb 27, 2019

@greebie sounds good! I'll try and get this tested in the next couple days.

@ruebot ruebot merged commit 420b72d into archivesunleashed:master Feb 28, 2019

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.