Crib sheet

[VVH]

A crib sheet would enable users to collect various examples of letters, numbers and so on to refer back to if they get stuck whilst transcribing. @rogerhutchings mocked up an example for AnnoTate once upon a time, but we decided not to build this because of copyright issues. This is the mock up:

Do @edpaget or @camallen have any guidance as to how we would store snippets of larger subjects in a specific user's account? I imagine it would be similar to storing images on Talk but a) not whole images and b) you could have people making multiple snippets from one subject. Make sense?

[camallen]

Sounds to me like we could treat this as a modified version of user : subject collections. I.e. collect the original subject and store the offsets of the selected area (ROI) of the subject image in the user_collection_preferences. This collection may grow a bit large over time if a user s collecting a lot of data and may increase the network traffic to get all the images when really we're interested in just a portion of the image.

Another way we could do this would be to extract the ROI from the subject and append it to a sprites image / subject for the user which gets built client side. We can link a sprites image to the user via the user_project_preferences and store the sprite offsets in the subject metadata. This would be the most efficient way over all for network / storage but would involve building a sprite generation tool in the client.

@simoneduca @rogerhutchings thoughts on the above?

[simoneduca]

@camallen I like the second option. Perhaps something like this https://www.npmjs.com/package/grunt-spritesmith would help

[camallen]

yeah but it'd have to be outside the build process.

[simoneduca]

Yeah, scrap that.

[eatyourgreens]

This looks useful http://fengyuanchen.github.io/cropper/

[simoneduca]

@eatyourgreens thanks. I'm also going to look through the docs of this library http://nginx.org/en/docs/http/ngx_http_image_filter_module.html, which we already use for thumbnails, to see if we can use its cropping feat.

[simoneduca]

@camallen @eatyourgreens @rogerhutchings @marten This also seems to cover part of what we want to do http://frontendbabel.info/articles/css-sprites-with-gulp/ . Thoughts?

[camallen]

I think the ideal solution here would be to construct and web server(nginx) that has imageamigk installed and we respond with the convert --extract roi extraction command results for the remote file. That way we don't have to create new subject images just create a list of URLs for the subject and the offset into them.

[eatyourgreens]

Here's a javascript example that gives you a data URI representing the cropped image: http://jsbin.com/fovovu/1/edit?js,output Explanation here: http://andyshora.com/angular-image-cropper.html

[rogerhutchings]

@simoneduca Initially I thought that was addressing the wrong problem, really, but you could combine that with Cam's approach create a backend that generates one big sprite with all your clipped stuff in it, and returns the sprite data, offsets and character info in the response.

Pro: you only need one request to get your character set Con: you'd need to generate a whole bunch of inline styling

[camallen]

@eatyourgreens that's is a neat tool. @rogerhutchings we thought about that, ideally being able to specify this through a subject url like the thumbnail server works would be best.

[simoneduca]

Towards implementation:

1. Create 'add new' button. This will be inside the cribsheet toggle element and separate from the transcription buttons.
2. Crop to selected portion of the subject.
3. Save cropped image to server using base64 URI (see http://andyshora.com/angular-image-cropper.html)

[camallen]

I think we can do something with AWS lambda + API gateway with image magic here to rebuild our thumbnail service but this time include image ROI extraction too!

https://aws.amazon.com/blogs/compute/microservices-without-the-servers/

[simoneduca]

@camallen has built the server side tool that will be used for doing the cropping of subjects. https://imgproc.zooniverse.org/crop?w=1500&h=1500&x=60&y=120&u=panoptes-uploads.zooniverse.org/production/subject_location/90a3b642-55e2-4583-a4fb-2f0abeb5b285.jpeg

[simoneduca]

Closed via 0c93af1827a1431999362d3daf772b87510ceb3c